From c9fc64c2fe6e5fe6b845bed45fdc58e2048a8dcc Mon Sep 17 00:00:00 2001 From: Gahotx <53534938+Gahotx@users.noreply.github.com> Date: Sat, 28 Sep 2024 15:02:14 +0800 Subject: [PATCH 001/148] [zh-cn]: create the translation of the SVG attribute `baseFrequency` (#23783) Co-authored-by: A1lo --- .../web/svg/attribute/basefrequency/index.md | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/basefrequency/index.md diff --git a/files/zh-cn/web/svg/attribute/basefrequency/index.md b/files/zh-cn/web/svg/attribute/basefrequency/index.md new file mode 100644 index 00000000000000..81dab905aabdaf --- /dev/null +++ b/files/zh-cn/web/svg/attribute/basefrequency/index.md @@ -0,0 +1,112 @@ +--- +title: baseFrequency +slug: Web/SVG/Attribute/baseFrequency +l10n: + sourceCommit: 829db137a01feb14af7beaec178a3ea0118b4777 +--- + +{{SVGRef}} + +**`baseFrequency`** 属性表示 {{SVGElement("feTurbulence")}} 滤镜原语的噪点函数的基础频率参数。 + +你可以将此属性与以下 SVG 元素一起使用： + +- {{SVGElement("feTurbulence")}} + +## 示例 + +### 示例 1 + +```css hidden +html, +body, +svg { + height: 100%; +} +``` + +```html + + + + + + + + + + + +``` + +{{EmbedLiveSample("示例 1", "220", "220")}} + +### 示例 2 + +```html + + + + + + + + +``` + +{{EmbedLiveSample("示例 2", "220", "250")}} + +## 使用说明 + + + + + + + + + + + + + + + + +
值 + <number-optional-number> +
默认值0
动画性有
+ +- `` + + - : 如果提供了两个数字，第一个数字表示水平方向的基础频率，第二个数字表示垂直方向的基础频率。如果提供了一个数字，则该值同时作用于 x 轴 和 y 轴。 + + 禁止使用负值。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} From 00424a9c3f8ae0a9f97ae371d54a0b52420c8fd9 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 28 Sep 2024 16:11:01 +0800 Subject: [PATCH 002/148] zh-CN: create `extension.isAllowedIncognitoAccess()` (#23538) Co-authored-by: A1lo --- .../isallowedincognitoaccess/index.md | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md new file mode 100644 index 00000000000000..b4c4c579a859a0 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md @@ -0,0 +1,76 @@ +--- +title: extension.isAllowedIncognitoAccess() +slug: Mozilla/Add-ons/WebExtensions/API/extension/isAllowedIncognitoAccess +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +检查插件是否允许访问在“隐私浏览”模式下打开的标签页。 + +这是返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。 + +## 语法 + +```js-nolint +let isAllowed = browser.extension.isAllowedIncognitoAccess() +``` + +### 参数 + +无。 + +### 返回值 + +[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，将会兑现布尔值：如果插件被允许访问隐私标签页，则为 `true`，否则为 `false`。 + +## 示例 + +```js +function logIsAllowed(answer) { + console.log(`是否被允许：${answer}`); +} + +let isAllowed = browser.extension.isAllowedIncognitoAccess(); +isAllowed.then(logIsAllowed); +``` + +{{WebExtExamples}} + +## 浏览器兼容性 + +{{Compat}} + +> [!NOTE] +> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension#method-isAllowedIncognitoAccess) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。 + + From e74aea41de7fd4c956ff8d64f26e737b4b002e2d Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sat, 28 Sep 2024 16:13:59 +0800 Subject: [PATCH 003/148] zh-CN: create `extension.getURL()` (#23546) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Co-authored-by: A1lo --- .../api/extension/geturl/index.md | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md new file mode 100644 index 00000000000000..5cbd8c9e7e5dfb --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md @@ -0,0 +1,80 @@ +--- +title: extension.getURL() +slug: Mozilla/Add-ons/WebExtensions/API/extension/getURL +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +> [!WARNING] +> 该函数已被弃用。请改用 [`runtime.getURL`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getURL)。 + +转换扩展安装目录中的相对路径为完全限定的 URL。 + +## 语法 + +```js-nolint +browser.extension.getURL( + path // 字符串 +) +``` + +### 参数 + +- `path` + - : `string`，扩展内相对于其安装目录的资源路径。 + +### 返回值 + +`string`，指向资源的完全限定 URL。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +给定一个打包在附加组件中的文件，路径为“beasts/frog.html”，可以这样获取完整的 URL： + +```js +let fullURL = browser.extension.getURL("beasts/frog.html"); + +// -> 类似于这样的 URL： +// moz-extension://2c127fa4-62c7-7e4f-90e5-472b45eecfdc/beasts/frog.html +``` + +{{WebExtExamples}} + +> [!NOTE] +> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/#method-getURL) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。 + + From 32824fa35c4eb8cf691cc195085008c4c90f1490 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:32:11 +0200 Subject: [PATCH 004/148] [ru] update `Web/JavaScript/Reference/Global_Objects/Date/toUTCString` translation (#23762) [ru] update 'Web/JavaScript/Reference/Global_Objects/Date/toUTCString' translation --- .../global_objects/date/toutcstring/index.md | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md index 873114ae0515e1..c7a723e994320a 100644 --- a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md +++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md @@ -1,31 +1,57 @@ --- title: Date.prototype.toUTCString() slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +l10n: + sourceCommit: 77e46a5b43f828fcc6bd30facddc6fc4bfe84f9b --- {{JSRef}} ## Сводка -Метод **`toUTCString()`** преобразует дату в строку, используя часовой пояс UTC. +Метод **`toUTCString()`** экземпляров {{jsxref("Date")}} возвращает строку, представляющую дату в формате [RFC 7231](https://datatracker.ietf.org/doc/html/rfc7231#section-7.1.1.1), отрицательные значения допускаются. Временная зона всегда UTC. `toGMTString()` является синонимом этого метода. + +{{EmbedInteractiveExample("pages/js/date-toutcstring.html", "shorter")}} ## Синтаксис -``` -dateObj.toUTCString() +```js-nolint +toUTCString() ``` ### Параметры Нет. +### Возвращаемое значение + +Строка, представляющая дату, используя временную зону UTC (смотрите описание формата). Возвращает `"Invalid Date"` если дата [недопустима](/ru/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date). + ## Описание -Значение, возвращаемое методом `toUTCString()`, является человеко-читаемой строкой в часовом поясе UTC. Формат возвращаемого значения зависит от платформы. Наиболее распространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822. +Значение, возвращаемое методом `toUTCString()`, является строкой в формате `Www, dd Mmm yyyy HH:mm:ss GMT`, где: + +| Строка | Значение | +| ------ | ------------------------------------------------------------------- | +| `Www` | День недели в виде трёх букв (например, `Sun`, `Mon`) | +| `dd` | День месяца в виде двух цифр, с ведущим нулём, если требуется | +| `Mmm` | Месяц в виде трёх букв (например, `Jan`, `Feb`) | +| `yyyy` | Год в виде четырёх или более цифр с ведущими нулями, если требуется | +| `HH` | Час в виде двух цифр с ведущим нулём если требуется | +| `mm` | Минута в виде двух цифр с ведущим нулём если требуется | +| `ss` | Секунды в виде двух цифр с ведущим нулём, если требуется | + +### Псевдонимы + +`Date` API в JavaScript был создан под влиянием библиотеки `java.util.Date` из языка Java (которая впоследствии стала устаревшей, начиная с версии Java 1.1 в 1997 году). В частности, у класса `Date` в Java есть метод `toGMTString`, который был неудачно назван, потому что [Среднее время по Гринвичу](https://ru.wikipedia.org/wiki/Среднее_время_по_Гринвичу) не эквивалентно [Всемирному координированному времени](https://ru.wikipedia.org/wiki/Всемирное_координированное_время), тогда как даты в JavaScript оперируют временем UTC. В целях совместимости `toGMTString` остаётся псевдонимом `toUTCString`, и они ссылаются на один и тот же объект. То есть: + +```js +Date.prototype.toGMTString.name === "toUTCString"; +``` ## Примеры -### Пример: использование метода `toUTCString()` +### Использование toUTCString() ```js const d = new Date(0); From ae654e317185710b5f7e5f6482aea96b76558ff7 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:44:24 +0200 Subject: [PATCH 005/148] [ru] update `Web/API/Animation/cancel` translation (#23365) * [ru] update 'Web/API/Animation/cancel' translation --- files/ru/web/api/animation/cancel/index.md | 28 ++++++++++++---------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/files/ru/web/api/animation/cancel/index.md b/files/ru/web/api/animation/cancel/index.md index 9ee818ece042e0..546dd27227d8d7 100644 --- a/files/ru/web/api/animation/cancel/index.md +++ b/files/ru/web/api/animation/cancel/index.md @@ -1,32 +1,34 @@ --- -title: Animation.cancel() +title: "Animation: метод cancel()" slug: Web/API/Animation/cancel +l10n: + sourceCommit: ec1006afdf68a5808a48ab6301f9ccff3cd7ecc2 --- -{{ SeeCompatTable() }}{{ APIRef("Web Animations") }} +{{ APIRef("Web Animations") }} -Метод **`cancel()`** API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение. +Метод **`cancel()`** Web Animation API интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}}, вызванные этой анимацией и прекращает воспроизведение. > [!NOTE] > Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в `null`. -## Syntax +## Синтаксис -``` -Animation.cancel(); +```js-nolint +cancel() ``` -### Parameters +### Параметры -None. +Нет. -### Return value +### Возвращаемое значение -None. +Нет ({{jsxref("undefined")}}). -### Exceptions +### Исключения -Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме `"idle"`, {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным `AbortError`. +Этот метод напрямую не выбрасывает исключения, однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены является `"idle"`, то {{domxref("Animation.finished", "промис завершения текущей анимации", "", 1)}} отклоняется с {{domxref("DOMException")}} и именем `AbortError`. ## Спецификации @@ -42,4 +44,4 @@ None. - {{domxref("KeyframeEffect")}} - {{domxref("Animation")}} - {{domxref("Animation.playState")}} -- {{domxref("Animation.finished")}} returns the promise this action will reject if the animation's `playState` is not `"idle"`. +- {{domxref("Animation.finished")}} возвращает промис, который отменит это действие, если `playState` анимации не `"idle"`. From a090bf24a66efa134c472e99260500e748e7b7ce Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:45:28 +0200 Subject: [PATCH 006/148] [ru] update APIRef macro usage (#23279) * [ru] update APIRef macro usage --- .../learn/javascript/building_blocks/event_bubbling/index.md | 4 ---- files/ru/web/api/document/defaultview/index.md | 2 +- files/ru/web/api/settimeout/index.md | 4 ++-- files/ru/web/api/window/sessionstorage/index.md | 4 ++-- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md index 109a274c6d3164..8f43d6d64f8fe0 100644 --- a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md +++ b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md @@ -4,10 +4,6 @@ slug: Learn/JavaScript/Building_blocks/Event_bubbling original_slug: Web/API/Event/Comparison_of_Event_Targets --- -{{ ApiRef() }} - -### Event targets - Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target. Существуют 5 целей для рассмотрения: diff --git a/files/ru/web/api/document/defaultview/index.md b/files/ru/web/api/document/defaultview/index.md index 535033af175295..059caf01c0580c 100644 --- a/files/ru/web/api/document/defaultview/index.md +++ b/files/ru/web/api/document/defaultview/index.md @@ -5,7 +5,7 @@ l10n: sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d --- -{{ApiRef}} +{{APIRef}} В браузерах **`document.defaultView`** возвращает объект {{domxref("Window", "window")}}, связанный с {{Glossary("Browsing_context", "документом")}}, или `null` если документ не доступен. diff --git a/files/ru/web/api/settimeout/index.md b/files/ru/web/api/settimeout/index.md index 580bf91e16063e..aab96f1831ddc0 100644 --- a/files/ru/web/api/settimeout/index.md +++ b/files/ru/web/api/settimeout/index.md @@ -1,9 +1,9 @@ --- -title: WindowTimers.setTimeout() +title: Глобальная функция setTimeout() slug: Web/API/setTimeout --- -{{ APIRef() }} +{{APIRef("HTML DOM")}} {{AvailableInWorkers}} ## Краткое изложение diff --git a/files/ru/web/api/window/sessionstorage/index.md b/files/ru/web/api/window/sessionstorage/index.md index 1f8e0dec74fc36..b7604875e894c8 100644 --- a/files/ru/web/api/window/sessionstorage/index.md +++ b/files/ru/web/api/window/sessionstorage/index.md @@ -1,9 +1,9 @@ --- -title: Window.sessionStorage +title: "Window: свойство sessionStorage" slug: Web/API/Window/sessionStorage --- -{{APIRef()}} +{{APIRef("Web Storage API")}} `Свойство sessionStorage` позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. **Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы,** что отличается от поведения session cookies**.** From 2f151badcd9d9a3ffb1cee94fd3c28febadced53 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:54:30 +0200 Subject: [PATCH 007/148] [ru] update `Web/API/Window/self` translation (#23269) [ru] update 'Web/API/Window/self' translation --- files/ru/web/api/window/self/index.md | 29 ++++++++++++++------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/files/ru/web/api/window/self/index.md b/files/ru/web/api/window/self/index.md index 5f24950a8e5cfc..5531b31177a845 100644 --- a/files/ru/web/api/window/self/index.md +++ b/files/ru/web/api/window/self/index.md @@ -1,31 +1,32 @@ --- -title: Window.self +title: "Window: свойство self" slug: Web/API/Window/self +l10n: + sourceCommit: cc070123f72376faec06e36622c4fc723a75325f --- -{{ APIRef() }} +{{APIRef}} -Свойство **`Window.self`** доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект `window` (`window.self`) или переменную `self`. Преимущество доступа через переменную `self` заключается в том, что её можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае `self` эквивалентна `window.self`), но также в воркерах (в случае воркера `self` эквивалентна {{domxref("WorkerGlobalScope.self")}}). +Доступное только для чтения свойство **`Window.self`** возвращает само окно в виде объекта {{domxref("WindowProxy")}}. Оно может быть использовано вместе с точечной нотацией на объекте `window` (как `window.self`) или просто `self`. Преимущество доступа через `self` заключается в том, что такую нотацию можно использовать в окружениях, в которых нет объекта `window`, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть `window` (в таком случае `self` эквивалентно `window.self`), но также в контексте воркерах (тогда `self` будет эквивалентно {{domxref("WorkerGlobalScope.self")}}). -## Пример +## Примеры -В следующем примере `window.self` точно также может быть заменено на `window`. +В следующем примере `window.self` может быть заменено на `window`. ```js if (window.parent.frames[0] != window.self) { - // этот window не является первым frame в списке + // это окно не является первым в списке } ``` -Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект и таким образом: +Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект, и поэтому всё следующее эквивалентно: ```js -var w1 = window; -var w2 = self; -var w3 = window.window; -var w4 = window.self; -// Значения переменных w1, w2, w3, w4 строго равны между собой -// Но только переменная w2 будет работать в workers +const w1 = window; +const w2 = self; +const w3 = window.window; +const w4 = window.self; +// w1, w2, w3, w4 равнозначны, но только w2 будет работать в workers ``` ## Спецификации @@ -38,4 +39,4 @@ var w4 = window.self; ## Смотрите также -- Its `Worker` equivalent, {{domxref("WorkerGlobalScope.self")}}. +- {{domxref("WorkerGlobalScope.self")}} — эквивалент для' `Worker`. From bffb598c4e90318d2c5151d51943a349967f156a Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:54:48 +0200 Subject: [PATCH 008/148] [ru] fix links in `Learn/HTML/Tables/Advanced` (#23270) * [ru] fix links in 'Learn/HTML/Tables/Advanced' --------- Co-authored-by: Artem Shibakov --- files/ru/learn/html/tables/advanced/index.md | 22 +++++++------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md index 383a6cdaaa20ab..6ad640e8b48440 100644 --- a/files/ru/learn/html/tables/advanced/index.md +++ b/files/ru/learn/html/tables/advanced/index.md @@ -30,18 +30,18 @@ slug: Learn/HTML/Tables/Advanced Заголовок помещают сразу после тега ``. > [!NOTE] -> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в `
` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `
` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице). +> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в элементе `` для добавления описания, которое также будет распознано программами для чтения с экрана. Однако мы рекомендуем вместо этого использовать элемент `, \ и \ @@ -55,7 +55,7 @@ slug: Learn/HTML/Tables/Advanced - Элементом `` нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы). - Элементом `` необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту). -> **Примечание:** `` всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется `` и посмотрите HTML код в [browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем. +> **Примечание:** `` всегда есть в каждой таблице, даже если он не указывается коде явно. Вы можете убедиться в этом, открыв один из предыдущих примеров в котором не используется `` и посмотрев HTML код в [Developer Tools браузера](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем. ### Упражнение: Добавление структуры таблицы @@ -82,7 +82,7 @@ slug: Learn/HTML/Tables/Advanced 7. Сохраните, обновите и вы увидите результат. Если `` и `` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля. > [!NOTE] -> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)). +> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Введение в CSS](/ru/docs/Learn/CSS/First_steps) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)). Ваша готовая таблица должна выглядеть примерно так: @@ -198,7 +198,7 @@ slug: Learn/HTML/Tables/Advanced {{ EmbedLiveSample('Hidden_example', '100%', 300) }} > [!NOTE] -> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)). +> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)). ## Вложенные таблицы @@ -389,16 +389,10 @@ slug: Learn/HTML/Tables/Advanced 3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`. > [!NOTE] -> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). +> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). ## Заключение -Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Styling_boxes/Styling_tables). +Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Building_blocks/Styling_tables). {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} - -## В этом блоке - -- [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics) -- [HTML таблицы продвинутые возможности и доступность](/ru/docs/Learn/HTML/Tables/Advanced) -- [Структурирование данных о планетах](/ru/docs/Learn/HTML/Tables/Structuring_planet_data) From 6fc61d2469d7970c1d3cfbbaebca72c0b5f75791 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sat, 28 Sep 2024 16:57:05 +0200 Subject: [PATCH 009/148] [ru] update `Web/API/Window/scrollBy` translation (#23236) [ru] update 'Web/API/Window/scrollBy' translation --- files/ru/web/api/window/scrollby/index.md | 60 +++++++++++++++++------ 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/files/ru/web/api/window/scrollby/index.md b/files/ru/web/api/window/scrollby/index.md index ae7b652510e17b..a927f714dc8fd5 100644 --- a/files/ru/web/api/window/scrollby/index.md +++ b/files/ru/web/api/window/scrollby/index.md @@ -1,37 +1,69 @@ --- -title: Window.scrollBy() +title: "Window: метод scrollBy()" slug: Web/API/Window/scrollBy +l10n: + sourceCommit: 62cedc63226017e9e7d0718b6fea3529ca8dbf37 --- -{{ APIRef() }} +{{APIRef}} -## Описание - -Прокручивает документ на указанные величины. +Метод **`Window.scrollBy()`** прокручивает документ в окне на указанную величину. ## Синтаксис -``` -window.scrollBy(X, Y); +```js-nolint +scrollBy(x-coord, y-coord) +scrollBy(options) ``` ### Параметры -- `X` - смещение в пикселях по горизонтали. -- `Y` - смещение в пикселях по вертикали. +- `x-coord` смещение в пикселях по горизонтали. +- `y-coord` смещение в пикселях по вертикали. -Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх. +\- или - -## Пример +- `options` -``` -// Прокрутка на один экран вертикально вниз. + - : Объект, содержащий следующие свойства: + - `top` + - : Указывает количество пикселей по оси Y для прокрутки окна или элемента. + - `left` + - : Указывает количество пикселей по оси X для прокрутки окна или элемента. + - `behavior` + - : Указывает, нужно ли анимировать прокрутку плавно (`smooth`), быстрым перемещением (`instant`) или предоставить выбор браузеру (`auto`, по умолчанию). + +### Возвращаемое значение + +Нет ({{jsxref("undefined")}}). + +## Примеры + +Для прокрутки вниз страницы: + +```js window.scrollBy(0, window.innerHeight); ``` +Для прокрутки вверх: + +```js +window.scrollBy(0, -window.innerHeight); +``` + +С использованием `options`: + +```js +window.scrollBy({ + top: 100, + left: 100, + behavior: "smooth", +}); +``` + ## Примечания -[window.scrollBy](/ru/docs/DOM/Window.scrollBy) прокручивает страницу на указанное количество пикселей, в то время как метод [window.scroll](/ru/docs/DOM/Window.scroll) указывает абсолютную позицию в документе, на которую надо сместиться. Смотрите также [window.scrollByLines](/ru/docs/DOM/Window.scrollByLines), [window.scrollByPages](/ru/docs/DOM/Window.scrollByPages) +`window.scrollBy()` прокручивает страницу на указанное количество пикселей, в то время как метод {{domxref("window.scroll()")}} прокручивает к абсолютной позиции в документе. Смотрите также {{domxref("window.scrollByLines()")}} и {{domxref("window.scrollByPages()")}}. ## Спецификации From 9d79001f257ce3fb20ffba18729e95f46efe0605 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Sep 2024 08:56:38 +0900 Subject: [PATCH 010/148] =?UTF-8?q?2024/09/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/reference/index.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/files/ja/web/css/reference/index.md b/files/ja/web/css/reference/index.md index a3fc7e07fbed34..d38d75f0e594bb 100644 --- a/files/ja/web/css/reference/index.md +++ b/files/ja/web/css/reference/index.md @@ -2,7 +2,7 @@ title: CSS リファレンス slug: Web/CSS/Reference l10n: - sourceCommit: 62c5c3f5655002f230bf0153fbdf8a883611014a + sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3 --- {{CSSRef}} @@ -13,7 +13,7 @@ l10n: ### スタイルルールの構文 -``` +```css スタイルルール ::= セレクターリスト { プロパティリスト @@ -22,7 +22,7 @@ l10n: ここで、 -``` +```css セレクターリスト ::= セレクター[:擬似クラス] [::擬似要素] [, セレクターリスト] @@ -45,7 +45,7 @@ div.menu-bar li:hover > ul { } ``` -初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。 +初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて ({{Glossary("ASCII")}}) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。 ### アットルールの構文 @@ -53,6 +53,9 @@ div.menu-bar li:hover > ul { ## 索引 +> [!NOTE] +> この索引は、[SVG](/ja/docs/Web/SVG) 要素上で CSS プロパティとして使える SVG 専用プレゼンテーション属性を含んでいません。 + > [!NOTE] > この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。 @@ -60,7 +63,7 @@ div.menu-bar li:hover > ul { ## セレクター -以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_Selectors)で、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。 +以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_selectors)で、DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。 ### 基本セレクター @@ -99,7 +102,7 @@ div.menu-bar li:hover > ul { - [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) `::` - : HTML に含まれていないエンティティを表します。 -> **メモ:** **関連情報:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)。 +> **注目:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)および[擬似要素の仕様書](https://drafts.csswg.org/css-pseudo/)も参照してください。 ## 概念 @@ -128,7 +131,7 @@ div.menu-bar li:hover > ul { ### レイアウト -- [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) +- [ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context) - [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [包含ブロック](/ja/docs/Web/CSS/Containing_block) - [レイアウトモード](/ja/docs/Web/CSS/Layout_mode) @@ -142,11 +145,7 @@ div.menu-bar li:hover > ul { ### 主なオブジェクトの種類 - {{DOMxRef("Document.styleSheets")}} -- `{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}` -- `cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}` (セレクターとスタイル) -- `cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}` - {{DOMxRef("HTMLElement.style")}} -- `HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}` (スタイルのみ) - {{DOMxRef("Element.className")}} - {{DOMxRef("Element.classList")}} @@ -162,4 +161,4 @@ div.menu-bar li:hover > ul { ## 外部リンク -- [CSS 目次 (w3.org)](https://www.w3.org/TR/CSS/#indices) +- [CSS 索引 (w3.org)](https://www.w3.org/TR/CSS/#indices) From 53da5633beb13ebc9d888e66f5834042c969f3d2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Sep 2024 15:52:45 +0900 Subject: [PATCH 011/148] =?UTF-8?q?=E4=BE=8B=E3=81=AE=E7=AF=80=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E6=96=87=E3=81=AE=E7=BF=BB=E8=A8=B3=E5=BF=98?= =?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/scrollbar-gutter/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/files/ja/web/css/scrollbar-gutter/index.md b/files/ja/web/css/scrollbar-gutter/index.md index d9fd88921a7c2d..7f6214348a8c7c 100644 --- a/files/ja/web/css/scrollbar-gutter/index.md +++ b/files/ja/web/css/scrollbar-gutter/index.md @@ -53,14 +53,14 @@ scrollbar-gutter: unset; ## 例 -The examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within. +次の例は、`scrollbar-gutter` プロパティの異なる値が、1 つ以上の段落を含むスクロール可能な `div` 要素（`.container`）にどのように影響するかを示しています。 > [!NOTE] -> In the images for the examples, the user's system settings are set to classic scrollbars (always shown). +> 例の画像では、ユーザーのシステム設定は従来のスクロールバー（常に表示）に設定されています。 ### 例 1 -Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it. +コンテンツが大きくなったり小さくなったりすることでスクロールバーが表示されたり消えたりするため、そのための空間が確保され、不要なレイアウト変更を防ぐことができます。 ```css .container { @@ -68,11 +68,11 @@ Prevent unneeded layout changes as the content growing or shrinking causes the s } ``` -![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is](stable-no-scroll.png) +![div 要素の中にテキストの段落があり、スクロールバーの右側に空間がある。](stable-no-scroll.png) ### 例 2 -Add symmetric spacing to both sides of the box so the content is centered: +ボックスの両側に左右対称の空間を追加し、コンテンツが中央に来るようにします。 ```css .container { @@ -80,12 +80,12 @@ Add symmetric spacing to both sides of the box so the content is centered: } ``` -![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left](stable-both-edges.png) +![テキストの段落を含む div 要素で、スクロールバーがある右側に空間があり、左側に同じ空間がある。](stable-both-edges.png) ### 例 3 -Align the contents of a non-scrolling element and a scrolling one adjacent to it: -This example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent. +スクロールしない要素と、それに隣接するスクロールする要素の内容を揃えます。 +この例では、2 つの div を横に並べています。左側のものはスクロールしませんが、右側のものはスクロールします。両方とも `scrollbar-gutter` が適用されており、スクロール可能なコンテンツを持たない左側の div のための空間も確保されています。これは、コンテンツの幅を一定に保つために使う良いテクニックです。 ```css .container1 { @@ -98,13 +98,13 @@ This example shows two divs side by side. The one on the left has no scroll, but } ``` -![Two adjacent divs containing text, both with space for a scrollbar](side-by-side.png) +![テキストを含む 2 つの隣接する div で、両方ともスクロールバーのための空間がある。](side-by-side.png) ### スクロールバーのオーバーレイ -For reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect. +参考までに、この画像は上記と同じ div を示していますが、ユーザーのシステム設定がスクロールバーをオーバーレイするように設定されています。ここでは、スクロールバーはユーザーがスクロールしているときだけ表示され、コンテンツの上に表示されるため、スクロールバーのための空間は確保されず、`scrollbar-gutter` プロパティは影響しないことに注意してください。 -![One div with text, no visible scrollbar](for-ref-no-scroll.png) +![テキストを含む 1 つの div、スクロールバーなし](for-ref-no-scroll.png) ## 仕様書 From f3267d8b0f4252b2d49e56e9d9cc4b3a9c370a71 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Sep 2024 23:58:48 +0900 Subject: [PATCH 012/148] =?UTF-8?q?2024/07/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=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 --- .../resolving_relative_references/index.md | 164 ++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/ja/web/api/url_api/resolving_relative_references/index.md diff --git a/files/ja/web/api/url_api/resolving_relative_references/index.md b/files/ja/web/api/url_api/resolving_relative_references/index.md new file mode 100644 index 00000000000000..83fab003471d2e --- /dev/null +++ b/files/ja/web/api/url_api/resolving_relative_references/index.md @@ -0,0 +1,164 @@ +--- +title: 相対参照の URL への解決 +slug: Web/API/URL_API/Resolving_relative_references +l10n: + sourceCommit: 216794e76611c18e53222bb8efa570e898e990de +--- + +{{DefaultAPISidebar("URL API")}} + +[`URL()` コンストラクター](/ja/docs/Web/API/URL/URL)、または {{domxref("URL.parse_static", "URL.parse()")}} 静的メソッド ([URL API](/ja/docs/Web/API/URL_API)) を使用すると、相対参照とベース URL を絶対 URL に解決することができます。 + +どちらのメソッドも、最大 2 つの文字列引数を取り、絶対 URL を表す [`URL()`](/ja/docs/Web/API/URL) オブジェクトを返します。 +最初の引数は絶対 URL または URL への相対参照を表し、2 番目の引数は、最初の引数に相対参照が指定されている場合にその相対参照を解決するために使用されるベース URL です。 +これらのメソッドは、無効な URL が渡されると `URL()` コンストラクターがエラーを発生させるのに対し、`parse()` は `null` を返すという点を除いて、同じ方法で相対参照を解決します。 + +下記コードは、同じ `url` および `base` URL 値を使用してメソッドがどのように使用されるかを示しています。 + +```js +const url = "articles"; +const base = "https://developer.mozilla.org/some/path"; +const constructorResult = new URL(url, base); +// => https://developer.mozilla.org/some/articles +const parseResult = URL.parse(url, base); +// => https://developer.mozilla.org/some/articles +``` + +例えば、指定されたベース URL と相対参照から `URL` を解決することは、単純に指定された引数を結合するだけではないことが分かります。 + +この場合、カレントディレクトリーに相対するパス (`articles`) が渡されます。 +ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列です。 +この例では、`https://developer.mozilla.org/some/path` の末尾にスラッシュが指定されていないため、カレントディレクトリーは `https://developer.mozilla.org/some/` となり、最終的な URL は `https://developer.mozilla.org/some/articles` となります。 + +相対参照は、カレントディレクトリー (`./`)、カレントディレクトリーの親ディレクトリー (`../`)、またはサイトルート (`/`) に対する相対パス参照を使用して、ベース URL に対して解決されます。 +以下の章では、相対パスの各タイプについて、解決の作業方法を表示させます。 + +## カレンとディレクトリーからの相対 + +`./` で始まる相対参照、または接頭辞のない参照、例えば `./article`、`article`、`./article/` は、`base` 引数で表される URL のカレントディレクトリーに対する相対参照です。 + +```html hidden +

+```
+
+```css hidden
+#log {
+  height: 90px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列であり、下記コードブロックのベース文字列どちらも `https://test.example.org/api/` です。
+カレントディレクトリーから相対参照する `article` がこれに追加され、`https://test.example.org/api/article` に解決されます。
+
+```js
+log(new URL("./article", "https://test.example.org/api/").href);
+// => https://test.example.org/api/article
+log(new URL("article", "https://test.example.org/api/v1").href);
+// => https://test.example.org/api/article
+```
+
+同様に、下記どちらのベース URL 文字列も、カレンとディレクトリーは `https://test.example.org/api/v2/` です。
+最終的な URL を解決するために、これらに `story/` と `story` を追加します。
+
+```js
+log(new URL("./story/", "https://test.example.org/api/v2/").href);
+// => https://test.example.org/api/v2/story/
+log(new URL("./story", "https://test.example.org/api/v2/v3").href);
+// => https://test.example.org/api/v2/story
+```
+
+{{EmbedLiveSample('Current directory relative', '100%', '140px')}}
+
+## 親ディレクトリーからの相対
+
+`../` という接頭辞が付いた相対参照、例えば `../path` は、`base` 引数で表される URL の現在のディレクトリーの親ディレクトリーに対する相対参照です。
+`../` の各インスタンスは現在のディレクトリーからフォルダー内を削除し、`../` 以降のテキストは残りのベースパスに追加されます。
+`../` を複数回指定することで親ディレクトリーに移動できますが、サイトルートのレベルまでです。
+
+例えば、ベース URL `https://test.example.com/test/api/v1/` とその親の相対 URL `../some/path` が指定された場合、カレントディレクトリーは `https://test.example.com/test/api/v1/`、親ディレクトリーは `https://test.example.com/test/api/`、解決された絶対 URL は `https://test.example.com/test/api/some/path` となります。
+
+```html hidden
+

+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+次の例では、この点をより詳しく説明します。
+すべてのケースにおいて、カレントディレクトリーは `https://test.example.org/api/v1/v2/` です（2 つ目のケースでは、`v3` が最後のスラッシュの後に続きます）。相対参照はそれぞれ異なる親ディレクトリを指します。
+
+```js
+log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/api/v1/path
+log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
+// => https://test.example.org/api/path
+log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/path
+```
+
+{{EmbedLiveSample('Parent-directory relative', '100%')}}
+
+## ルートからの相対
+
+`/` 接頭辞付きの相対参照、たとえば `/path` は、`base` 引数で指定された URL のサイトルートに対する相対パスとなります。
+例えば、ベース URL が `https://test.example.com/api/v1` の場合、ルート相対 URL `/some/path` の解決後の URL は `https://test.example.com/some/path` となります。
+
+> [!NOTE]
+> ルート相対 URL を解決すると、`base` URL のパス部分は関係なくなります。
+
+```html hidden
+

+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+以下に、いくつか例を挙げます。
+
+```js
+log(new URL("/some/path", "https://test.example.org/api/").href);
+// => https://test.example.org/some/path
+log(new URL("/", "https://test.example.org/api/v1/").href);
+// => https://test.example.org/
+log(new URL("/article", "https://example.com/api/v1/").href);
+// => https://example.com/article
+```
+
+{{EmbedLiveSample('Root relative', '100%')}}
+
+## 関連情報
+
+- [RFC 3986 - Relative Resolution](https://datatracker.ietf.org/doc/html/rfc3986.html#section-5.2): ベース及び相対 URL の解決の仕様書

From 26e3e7afa5bfd546ed387c9712dea390e6d8223a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Wed, 25 Sep 2024 00:08:37 +0900
Subject: [PATCH 013/148] =?UTF-8?q?2024/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/url/index.md | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/files/ja/web/api/url/index.md b/files/ja/web/api/url/index.md
index bdec1f504d4f73..cd18c88a5adf3c 100644
--- a/files/ja/web/api/url/index.md
+++ b/files/ja/web/api/url/index.md
@@ -2,23 +2,20 @@
 title: URL
 slug: Web/API/URL
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 32305cc3cf274fbfdcc73a296bbd400a26f38296
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL`** インターフェイスは、{{glossary("URL", "URL")}} の解釈、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。
 
 通常、新しい `URL` オブジェクトを作成するにはコンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定します。その後、解釈された URL のコンポーネントを簡単に読み取ったり、URL を変更したりすることができます。
 
-ブラウザーがまだ {{domxref("URL.URL", "URL()")}} コンストラクターに対応していない場合は、{{domxref("Window")}} インターフェイスの {{domxref("URL")}} プロパティを使用して URL オブジェクトにアクセスできます。対象とするブラウザーのいずれかに、この接頭辞を付ける必要があるかどうかを確認してください。
-
-{{AvailableInWorkers}}
-
 ## コンストラクター
 
 - {{domxref("URL.URL", "URL()")}}
-  - : 絶対 URL 文字列、または相対 URL 文字列とベース URL 文字列を使用して指定された URL を参照する `URL` オブジェクトを作成して返します。
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成し、それを返します。
+    渡された引数が有効な URL を定義していない場合、例外が発生します。
 
 ## プロパティ
 
@@ -49,12 +46,14 @@ l10n:
 
 ## 静的メソッド
 
-- [`canParse()`](/ja/docs/Web/API/URL/canParse_static)
+- {{domxref("URL.canParse_static", "canParse()")}}
   - : URL 文字列とオプションのベース URL 文字列から定義された URL が解釈可能で有効かどうかを示す論理値を返します。
-- {{domxref("URL/createObjectURL_static", "createObjectURL()")}}
+- {{domxref("URL.createObjectURL_static", "createObjectURL()")}}
   - : 一意の blob URL の入った文字列を返します。 これは、スキームとして `blob:` の入った URL で、その後にブラウザー内のオブジェクトを一意に識別する不透明な文字列が続きます。
-- {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}}
-  - : {{domxref("URL.createObjectURL_static")}} を使用して以前に生成したオブジェクト URL を取り消します。
+- {{domxref("URL.parse_static", "parse()")}}
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成して返します。渡された引数が無効な `URL` を定義している場合は、`null` を返します。
+- {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}}
+  - : {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用して以前に生成したオブジェクト URL を取り消します。
 
 ## メソッド
 
@@ -74,7 +73,7 @@ console.log(url.pathname); // "/cats"
 ```
 
 コンストラクターは URL を有効な URL に解釈できない場合に例外を発生させます。
-上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、[`canParse()`](/ja/docs/Web/API/URL/canParse_static) 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
+上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、{{domxref("URL.canParse_static", "canParse()")}} 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
 
 ```js
 if (URL.canParse("../cats", "http://www.example.com/dogs")) {
@@ -131,5 +130,4 @@ const response = await fetch(
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
 - [URL API](/ja/docs/Web/API/URL_API)
 - [URL とは何か](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
-- `URL` オブジェクトを取得するプロパティ: {{domxref("URL")}}
 - {{domxref("URLSearchParams")}}

From df5a6868a4081397652cd42675ec15f0c48d2249 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Wed, 25 Sep 2024 00:32:04 +0900
Subject: [PATCH 014/148] =?UTF-8?q?2024/09/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/url/url/index.md | 40 +++++++++++++++++++------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/files/ja/web/api/url/url/index.md b/files/ja/web/api/url/url/index.md
index 3ee42f49422202..e2a967a8bc3778 100644
--- a/files/ja/web/api/url/url/index.md
+++ b/files/ja/web/api/url/url/index.md
@@ -3,17 +3,15 @@ title: "URL: URL() コンストラクター"
 short-title: URL()
 slug: Web/API/URL/URL
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 5a7fae1cc8df27d50c9365511a714f3c2fa4bfc1
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL()`** コンストラクターは、引数によって定義された URL を表す、新しく生成された {{domxref("URL")}} オブジェクトを返します。
 
 与えられたベース URL または結果の URL が有効な URL でない場合、JavaScript の {{jsxref("TypeError")}} 例外が発生します。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -24,26 +22,35 @@ new URL(url, base)
 ### 引数
 
 - `url`
-  - : 絶対または相対 URL を表す文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクト、例えば {{htmlelement("a")}} や {{htmlelement("area")}} 要素です。
-    `url` が相対 URL である場合、`base` は必須であり、ベース URL として使用されます。
-    `url` が絶対 URL である場合、指定された `base` は無視されます。
+  - : 文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクトで、絶対またはベース URL に対する相対参照を表します。
+    `url` が相対参照である場合、`base` は必須であり、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL である場合、指定された `base` は結果の URL を作成するためには使用されません。
 - `base` {{optional_inline}}
-  - : `url` が相対 URL の場合に使用するベース URL を表す文字列です。
+
+  - : 文字列で、`url` が相対参照の場合に使用するベース URL を表します。
     指定されなかった場合、既定値は `undefined` です。
 
+    `base` を指定した場合、解決した URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL の最後のスラッシュまでのパス部分をカレントディレクトリーとした相対で解決されます。ただし、最後のスラッシュ以降は含まれません。
+    ルートへの相対参照は、ベースを原点とした相対で解決されます。
+    詳細については、[URL への相対参照の解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
 > [!NOTE]
-> 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
+> 引数 `url` と `base` はそれぞれ、渡された値を何でも、{{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} であっても文字列化します。これは、文字列を受け入れる他の Web API と同様です。
 > 具体的な例としては、既存の {{domxref("URL")}} オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの {{domxref("URL.href", "href")}} プロパティに文字列化されます。
 
 ### 例外
 
-| 例外                    | 説明                                                                                            |
-| ----------------------- | ----------------------------------------------------------------------------------------------- |
-| {{jsxref("TypeError")}} | `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではありません。 |
+- {{jsxref("TypeError")}}
+  - : `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではない場合。
 
 ## 例
 
-```js
+コンストラクターを使用する例をいくつか示します。
+
+> **メモ:** [相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)では、さまざまな `url` と `base` 値が最終的な絶対 URL に解決される方法を説明するさらなる例が提供されています。
+
+```js-nolint
 // ベース URL:
 let baseUrl = "https://developer.mozilla.org";
 
@@ -67,9 +74,11 @@ new URL("/ja/docs", A);
 
 new URL("/ja/docs", "https://developer.mozilla.org/fr-FR/toto");
 // => 'https://developer.mozilla.org/ja/docs'
+```
 
-// 無効な URL:
+こちらは無効な URL の例です。
 
+```js
 new URL("/ja/docs", "");
 // Raises a TypeError exception as '' is not a valid URL
 
@@ -104,5 +113,6 @@ new URL("//foo.com", "https://example.com");
 
 ## 関連項目
 
+- {{domxref("URL.parse_static", "URL.parse()")}}: 例外を発生しないこのコンストラクターの代用
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
-- 所属しているインターフェース: {{domxref("URL")}}。
+- 所属しているインターフェイス: {{domxref("URL")}}

From 50fe03d0d0b79f18a921a0526629fc0574c83d5d Mon Sep 17 00:00:00 2001
From: Gahotx <53534938+Gahotx@users.noreply.github.com>
Date: Sun, 29 Sep 2024 19:20:45 +0800
Subject: [PATCH 015/148] [zh-cn]: create the translation of the SVG attribute
 `azimuth` (#23782)

---
 .../zh-cn/web/svg/attribute/azimuth/index.md  | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 files/zh-cn/web/svg/attribute/azimuth/index.md

diff --git a/files/zh-cn/web/svg/attribute/azimuth/index.md b/files/zh-cn/web/svg/attribute/azimuth/index.md
new file mode 100644
index 00000000000000..9c8be37734cb29
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/azimuth/index.md
@@ -0,0 +1,75 @@
+---
+title: azimuth
+slug: Web/SVG/Attribute/azimuth
+l10n:
+  sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a
+---
+
+{{SVGRef}}
+
+**`azimuth`** 属性指定了光源在 XY 平面上的方向角度（顺时针），以相对于 x 轴的度数为单位。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feDistantLight")}}
+
+## 示例
+
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+
+  
+    
+      
+    
+  
+  
+    
+      
+    
+  
+
+  
+  
+
+```
+
+{{EmbedLiveSample("示例", "420", "200")}}
+
+## 使用说明
+
+
`, так как `summary` является устаревшим и не может быть прочитан зрячими пользователями (он не отображается на странице).
 
 ### Упражнение: Добавление заголовка
 
 Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
 
-1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col), или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
+1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#active_learning_colgroup_and_col) или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
 2. Добавьте подходящий заголовок к таблице.
 3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
 
 > [!NOTE]
-> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
 
 ## Добавление структуры с помощью \

+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
值{{cssxref("number")}}
默认值0
动画性有

+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}

From 1c88e8cf2fcfd457900a409e1bb6cdbae967910a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=9C=EC=A7=84?= <1106laura@naver.com>
Date: Sun, 29 Sep 2024 20:46:35 +0900
Subject: [PATCH 016/148] [ko] sync battery status api (#23802)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] sync battery status api

* fix: MD047/single-trailing-newline Files should end with a single newline character

* fix: 안내서에 따른 용어 및 누락 내용 추가

---------

Co-authored-by: hochan222 
---
 files/ko/web/api/battery_status_api/index.md | 72 ++++++++++++++------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/files/ko/web/api/battery_status_api/index.md b/files/ko/web/api/battery_status_api/index.md
index 1035888a4ab79f..b9b943d93e4b7d 100644
--- a/files/ko/web/api/battery_status_api/index.md
+++ b/files/ko/web/api/battery_status_api/index.md
@@ -1,38 +1,74 @@
 ---
 title: Battery Status API
 slug: Web/API/Battery_Status_API
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{DefaultAPISidebar("Battery API")}}
+{{DefaultAPISidebar("Battery API")}}{{securecontext_header}}
 
 **Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.
 
-Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.
+> [!NOTE]
+> 이 API는 [Web Workers](/ko/docs/Web/API/Web_Workers_API) 에서 사용이 불가능합니다. ({{domxref("WorkerNavigator")}} 에 포함되어 있지 않음)
+
+## 인터페이스
+
+- {{domxref("BatteryManager")}}
+  - : 시스템의 배터리 충전 상태에 대한 정보를 제공합니다.
+
+### 다른 인터페이스로의 확장
+
+- {{domxref("Navigator.getBattery()")}}
+  - : {{DOMxRef("BatteryManager")}} 객체를 이행하는 {{JSxRef("Promise")}}를 리턴합니다.
 
 ## 예제
 
-아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}} 와 {{domxref("BatteryManager.levelchange_event", "levelchange")}} 이벤트가 발생하면 완료 됩니다.
+이 예제에서는 배터리가 충전중인 상태(전원 케이블을 연결하여 충전 중인지)와 배터리 잔량 및 타이밍의 변화를 모두 관찰합니다. 이 작업은 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}}, {{domxref("BatteryManager.levelchange_event", "levelchange")}}, {{domxref("BatteryManager.chargingtimechange_event", "chargingtimechange")}}, {{domxref("BatteryManager.dischargingtimechange_event", "dischargingtimechange")}} 이벤트를 수신하는 방식으로 수행됩니다.
 
 ```js
-var battery =
-  navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+navigator.getBattery().then((battery) => {
+  function updateAllBatteryInfo() {
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
 
-function updateBatteryStatus() {
-  console.log("Battery status: " + battery.level * 100 + " %");
+  battery.addEventListener("chargingchange", () => {
+    updateChargeInfo();
+  });
+  function updateChargeInfo() {
+    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
+  }
+
+  battery.addEventListener("levelchange", () => {
+    updateLevelInfo();
+  });
+  function updateLevelInfo() {
+    console.log(`Battery level: ${battery.level * 100}%`);
+  }
 
-  if (battery.charging) {
-    console.log("Battery is charging");
+  battery.addEventListener("chargingtimechange", () => {
+    updateChargingInfo();
+  });
+  function updateChargingInfo() {
+    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
   }
-}
 
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
+  battery.addEventListener("dischargingtimechange", () => {
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo() {
+    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
+  }
+});
 ```
 
-명세서의 예제도 [**확인**](http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction)해보세요.
+[명세서의 예시도](https://www.w3.org/TR/battery-status/#examples) 참조하세요.
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -40,8 +76,6 @@ updateBatteryStatus();
 
 {{Compat}}
 
-## 더보기
+## 같이 보기
 
-- [Hacks blog post - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
-- {{domxref("BatteryManager")}}
-- {{domxref("window.navigator.battery","navigator.battery")}}
+- [Hacks blog post - Using the Battery API](https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)

From b1bab72af6ab0683bce7dd9a450a8ffa08b1e6f2 Mon Sep 17 00:00:00 2001
From: j <115390541+rosaceaee@users.noreply.github.com>
Date: Sun, 29 Sep 2024 20:55:49 +0900
Subject: [PATCH 017/148] =?UTF-8?q?[ko]=20api/htmlelement/tabindex=20?=
 =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#23600)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] api/htmlelement/tabindex 신규 번역

* 린트에 맞추어 공백 제거

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

* Update files/ko/web/api/htmlelement/tabIndex/index.md

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

* Tabindex 리뷰 내용 반영

* Update files/ko/web/api/htmlelement/tabIndex/index.md

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

* fix: 잘못된 파일 경로 수정

Co-authored-by: rosaceaee 

* fix: 잘못된 파일 경로 수정

Co-authored-by: rosaceaee 

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: hochan Lee 
Co-authored-by: rosaceaee 
---
 .../ko/web/api/htmlelement/tabindex/index.md  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 files/ko/web/api/htmlelement/tabindex/index.md

diff --git a/files/ko/web/api/htmlelement/tabindex/index.md b/files/ko/web/api/htmlelement/tabindex/index.md
new file mode 100644
index 00000000000000..3c1db6a1af5f95
--- /dev/null
+++ b/files/ko/web/api/htmlelement/tabindex/index.md
@@ -0,0 +1,46 @@
+---
+title: "HTMLElement: tabIndex 속성"
+slug: Web/API/HTMLElement/tabIndex
+l10n:
+  sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}
+
+**`tabIndex`** 는 현재 요소의 탭 순서를 나타내는 {{DOMxRef("HTMLElement")}} 인터페이스입니다.
+
+탭 순서는 다음과 같습니다.
+
+1. `tabIndex`가 양수인 요소인 경우.
+   동일한 `tabIndex`값을 가진 요소들은 나타나는 순서대로 탐색되어야 합니다.
+   탐색은 가장 낮은 `tabIndex`에서 가장 높은 `tabIndex`로 진행됩니다.
+2. `tabIndex` 속성을 지원하지 않거나 지원하면서 `tabIndex`를 `0`으로 지정한 요소들은 나타나는 순서대로 탐색됩니다.
+
+비활성화된 요소들은 탭 순서에 참여하지 않습니다.
+
+값은 순차적일 필요가 없으며, 특정 값으로 시작할 필요도 없습니다. 값은 음수일 수도 있지만, 각 브라우저는 매우 큰 값을 잘라냅니다.
+
+## 값
+
+정수
+
+## 예제
+
+```js
+const b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Accessibility of keyboard-navigable JavaScript widgets](/ko/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- HTML 전역 특성 [`tabindex`](/ko/docs/Web/HTML/Global_attributes/tabindex)

From af8b675f1eb939f5bc0cf065c2693372557d8b2c Mon Sep 17 00:00:00 2001
From: ICE0208 
Date: Sun, 29 Sep 2024 20:56:48 +0900
Subject: [PATCH 018/148] [ko] fix typo in comment (#23466)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix a type

슬록 -> 슬롯
---
 files/ko/web/javascript/guide/indexed_collections/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ko/web/javascript/guide/indexed_collections/index.md b/files/ko/web/javascript/guide/indexed_collections/index.md
index 438c7dd8d8566f..71a94155cd841a 100644
--- a/files/ko/web/javascript/guide/indexed_collections/index.md
+++ b/files/ko/web/javascript/guide/indexed_collections/index.md
@@ -559,7 +559,7 @@ const a = Array(5); // [ <5 empty items> ]
 // 배열 리터럴의 연속된 쉼표
 const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]
 
-// array.length보다 큰 인덱스의 슬록에 직접적으로 값 설정하기
+// array.length보다 큰 인덱스의 슬롯에 직접적으로 값 설정하기
 const c = [1, 2];
 c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]
 

From 3c0c71678a5403ddd5dcf9a3ad62eb69980e1eba Mon Sep 17 00:00:00 2001
From: Vivi 
Date: Sun, 29 Sep 2024 21:29:53 +0900
Subject: [PATCH 019/148] =?UTF-8?q?[ko]=20logical=20properties=20-=20basic?=
 =?UTF-8?q?=20concepts=20=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#21745?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: [ko] logical properties - basic concepts 신규 번역

* Update files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md

Co-authored-by: sunny 

* [fix] smoother sentence

* [fix] 이미지 파일 삭제

* fix: words

---------

Co-authored-by: sunny 
---
 .../index.md                                  | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md

diff --git a/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
new file mode 100644
index 00000000000000..6c50778fae1b05
--- /dev/null
+++ b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
@@ -0,0 +1,55 @@
+---
+title: 논리적 속성과 값의 기본 개념
+slug: Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values
+l10n:
+  sourceCommit: a08c1d8b4022ffbd69d4fd3097d0a30716f5fde7
+---
+
+{{CSSRef}}
+
+[CSS 논리적 속성과 값 모듈](/ko/docs/Web/CSS/CSS_logical_properties_and_values#properties) 은 CSS 에서의 {{glossary("physical properties")}} 의 대열 상대적인 매핑과 값을 정의합니다. 이 안내서에서는 모듈에 대해 다루며, {{glossary("flow relative values")}} 값과 속성에 대해 설명합니다.
+
+## 논리적 속성이 유용한 이유
+
+CSS 2.1과 이전 버전에서는 화면의 물리적 크기를 따라 요소의 크기를 설정해왔습니다. 그렇기 떄문에 박스를 {{CSSxRef("width")}} 와 {{CSSxRef("height")}} 로 표현했고, 아이템은 `top` 과 `left` 에서부터 위치시키고, 테두리, 바깥 여백, 그리고 안쪽 여백을 `top`, `right`, `bottom`, `left` 등에 할당했습니다. 논리적 속성과 값 모듈은 이러한 {{glossary("physical properties")}} 와 값을 논리적이거나 흐름 상대적인 값에 매핑합니다. 예로 `left`와 `right`, `top` 과 `bottom` 대신에 `start`와 `end`를 이용합니다.
+
+이러한 매핑은 원래의 레이아웃과 다른 쓰기 모드의 언어로 번역되는 사이트에서 매우 유용합니다. 예를 들어, CSS 그리드 레이아웃에서는, 만일 그리드 컨테이너가 그리드 요소들을 정렬하기 위해 {{CSSxRef("align-self")}} 와 {{CSSxRef("justify-self")}} 속성이 적용된 너비를 가지고 있을 때, 이 속성은 대열 상대적이기 때문에 `justify-self: start` 는 요소를 인라인 차원의 시작 지점에 요소들을 정렬하고, `align-self: start` 는 블록 차원에서의 시작 지점에 요소들을 정렬합니다.
+
+![가로 쓰기 모드에서의 그리드](grid-horizontal-width-sm.png)
+
+만일 컴포넌트의 쓰기 모드가 {{CSSxRef("writing-mode")}} 속성을 사용하여 `vertical-rl` 로 변경될 때, 정렬은 여전히 같은 방식으로 동작합니다. 인라인 차원은 세로로 동작하며, 블록 차원은 가로로 동작합니다. 그러나 그리드가 동일하게 보이지는 않는데, 이는 컨테이너에 지정된 너비는 가로로 측정되었으며, 이 측정은 텍스트의 논리나 상대 대열이 아닌 물리적인 측정이기 때문입니다.
+
+![세로 쓰기 모드에서의 그리드](grid-vertical-width-sm.png)
+
+`width` 속성을 사용하는 대신 논리적 속성인 {{CSSxRef("inline-size")}} 가 사용되었다면, 쓰기 모드에 관계 없이 컴포넌트가 동일한 방식으로 작동합니다.
+
+![세로 쓰기 모드에서의 그리드 레이아웃](grid-vertical-inline-size-small.png)
+
+아래의 실제 예제를 이용하여 시연해 볼 수 있습니다. `grid` 의 `writing-mode` 를 `vertical-rl` 에서 `horizontal-tb` 로 변경하여 다른 속성들이 레이아웃을 어떻게 변화시키는지 확인해 보세요.
+
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
+
+창의적인 이유로 가로 방향이 아닌 위에서 아래 방향의 쓰기 모드를 사용할 때 콘텐츠의 대열을 연관지을 수 있다는 것은 매우 중요한 일입니다.
+
+## 블록과 인라인 차원
+
+대열 상대적인 속성과 값의 핵심 개념은 블록과 인라인 두 개의 차원입니다. 플렉스박스와 그리드 레이아웃과 같은 CSS 레이아웃 메서드는 요소를 정렬하기 위해 `right` 및 `left`/`top` 및 `bottom` 를 대신하여 `block` 과 `inline` 개념을 사용합니다.
+
+`inline` 차원은 현재 사용 중인 쓰기 모드에서 텍스트가 따르는 차원입니다. 즉, 텍스트가 왼쪽에서 오른쪽의 가로 방향을 따르는 영어 문서나 텍스트가 오른쪽에서 왼쪽의 가로 방향을 따라는 아랍어 문서에서 인라인 차원은 수평입니다. 세로 쓰기 모드 (예시. 일어 문서) 로 전환되면 해당 쓰기 모드에서는 줄이 세로를 따르므로 인라인 차원은 수직이 됩니다.
+
+블록 차원은 다른 차원이고, 단락과 같은 블록 방향에서는 하나의 요소가 다른 요소 뒤에 배치됩니다. 영어나 아랍어 문서에서는 이들이 세로 방향을 따르고, 세로 쓰기 모드에서는 가로로 표시됩니다.
+
+아래 도표는 가로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![인라인 축이 가로로, 블록 축이 세로로 실행되는 것을 나타내는 도표](mdn-horizontal.png)
+
+아래 도표는 세로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![블록 축이 가로로, 인라인 축이 세로로 실행되는 것을 나타내는 도표](mdn-vertical.png)
+
+## 같이 보기
+
+- [그리드 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [플렉스 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [대열 레이아웃과 쓰기 모드](/ko/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
+- Smashing Magazine (2018)의 [논리적 속성과 값 이해하기](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)

From dbe1e76e0aaf0ee5023babd981d7b42831e00590 Mon Sep 17 00:00:00 2001
From: Vivi 
Date: Sun, 29 Sep 2024 21:37:03 +0900
Subject: [PATCH 020/148] =?UTF-8?q?[ko]=20using=20css=20counters=20?=
 =?UTF-8?q?=EC=B5=9C=EC=8B=A0=ED=99=94=20(#22085)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: [ko] using css counters 최신화

* [fix] 이미지 제거 및 단어 수정
---
 .../using_css_counters/index.md               | 211 +++++++++++++++---
 1 file changed, 184 insertions(+), 27 deletions(-)

diff --git a/files/ko/web/css/css_counter_styles/using_css_counters/index.md b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
index 54c6ede2189fea..05390bd39c64c2 100644
--- a/files/ko/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
@@ -1,59 +1,213 @@
 ---
 title: CSS 카운터 사용하기
 slug: Web/CSS/CSS_counter_styles/Using_CSS_counters
+l10n:
+  sourceCommit: f75fd658f627b5730a14ada901120cfa4ee01bda
 ---
 
 {{CSSRef}}
 
-**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.
+**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, 카운터를 사용해 웹페이지의 제목에 자동으로 번호를 매기거나 순서가 있는 목록의 서수를 변경할 수 있습니다.
+
+카운터는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하거나 감소하며, 본질적으로 변수입니다.
+카운터에 사용자 지정 이름을 적용할 수 있고, 모든 순서가 있는 목록에 대해 기본적으로 생성되는 `list-item` 카운터도 조작할 수 있습니다.
 
 ## Counters 사용하기
 
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다. 카운터의 값은 {{cssxref("counter-increment")}} 속성을 이용하여 증가하거나 감소시킬 수 있습니다. 카운터의 현재 값은 {{cssxref("counter", "counter()")}} 혹은 {{cssxref("counters", "counters()")}} 함수로 표시되는데, 일반적으로 [가상 요소](/ko/docs/Web/CSS/Pseudo-elements)인 {{CSSxRef("content")}} 속성 내에서 쓰입니다.
+
+카운터는 박스를 생성하는 요소에 대해서만 설정, 재설정, 혹은 증가시킬 수 있습니다.
+예를 들어, 요소에 `display: none` 가 설정되어 있다면, 해당 요소에서 적용되는 카운터는 모두 무시됩니다.
+
+카운터의 속성은 {{cssxref("contain")}} 속성에 상세하게 설명된 스타일 격리를 사용하여 특정 요소 내에서 범위를 지정할 수 있습니다.
+
 ### 카운터 값 조작하기
 
-CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값 `0`)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다.
+이 속성은 카운터의 값을 아무 숫자로 변경하는 데에 사용됩니다.
+
+아래 예제에서는 `section` 이라고 명명된 카운터를 기본값 (0)으로 초기화합니다.
+
+```css
+counter-reset: section;
+```
+
+각각에 대해 초기값을 특정한다면 여러 개의 카운터를 초기화할 수도 있습니다.
+아래 예제에서는 `section` 과 `topic` 카운터를 기본값으로 초기화하고, `page` 카운터는 3으로 설정합니다.
+
+```css
+counter-reset: section page 3 topic;
+```
+
+한번 초기화가 되면 카운터의 값은 {{cssxref("counter-increment")}} 을 사용하여 증가하거나 감소시킬 수 있습니다.
+예를 들어, 아래 선언에서는 모든 `h3` 태그에 대해 `section` 카운터를 하나씩 증가시킵니다.
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+}
+```
+
+카운터의 이름 뒤에 양수나 음수를 사용함으로써증가하거나 감소시킬 값을 설정할 수 있습니다.
+
+카운터의 이름으로 `none`, `inherit`, 또는 `initial` 는 사용 불가하고, 이런 이름을 사용하면 선언은 무시됩니다.
 
 ### 카운터 표시하기
 
-Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+카운터의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+
+예를 들어, 다음 선언에서는 `counter()` 를 사용하여 각각의 `h3` 제목 앞에 `Section :` 라는 텍스트를 추가하고, 여기서의 `` 는 십진수로 카운트된 값입니다. (기본으로 표시되는 스타일)
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 기본 스타일(십진수)로 카운터 값 표시 */
+}
+```
+
+{{cssxref("counter", "counter()")}} 함수는 중첩된 단계의 번호 매기기가 부모 단계의 맥락을 포함하지 않을 때에 사용됩니다.
+여기 각각의 중첩 단계가 1부터 시작하는 예제가 있습니다.
+
+```plain
+1 One
+  1 Nested one
+  2 Nested two
+2 Two
+  1 Nested one
+  2 Nested two
+  3 Nested three
+3 Three
+```
+
+{{cssxref("counters", "counters()")}} 함수는 중첩된 단계의 카운트가 부모 단계의 카운트를 포함해야 할 때 사용됩니다.
+예를 들어, 다음과 같이 섹션을 레이아웃하는 데에 사용할 수 있습니다.
+
+```plain
+1 One
+  1.1 Nested one
+  1.2 Nested two
+2 Two
+  2.1 Nested one
+  2.2 Nested two
+  2.3 Nested three
+3 Three
+```
+
+{{cssxref("counter", "counter()")}} 함수는 `counter()` 와 `counter(, )` 처럼 두 가지 형태로 사용될 수 있습니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 가장 안쪽의 카운터 값입니다.
+
+{{cssxref("counters", "counters()")}} 함수 또한 두 가지 형태를 가지는데, `counters(, )` 와 `counters(, , )` 입니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 모든 카운터 값이고, 가장 바깥쪽부터 가장 안쪽까지를 문자열 (``)를 사용하여 분리합니다.
+
+카운터는 두 가지 방법 모두에서 지정된 `` 로 렌더링됩니다. (기본값은 `decimal`)
+{{cssxref("list-style-type")}} 값들을 사용하거나 사용자 지정의 [맞춤 스타일](/ko/docs/Web/CSS/CSS_counter_styles)을 사용할 수도 있습니다.
+
+`counter()` 와 `counters()` 의 사용에 대한 예제는 아래 [기본 예제](#기본_예제) 그리고 [중첩 카운터 예제](#중첩_카운터_예제)에서 확인할 수 있습니다.
+
+### 역순 카운터
+
+역순 카운터는 증가가 아닌 감소를 목적으로 하는 카운터입니다.
+역순 카운터는 {{cssxref("counter-reset")}} 에서 카운터의 이름을 지정할 때 `reversed()` 함수 표기를 사용하여 생성할 수 있습니다.
+
+역순 카운터는 기본 초기값을 가지고 있는데, 이는 요소의 수와 동일합니다. (기본값이 0인 일반적인 카운터와는 다릅니다.)
+이는 요소의 수에서 하나까지 감소시키는 카운터의 구현을 더 쉽게 만듭니다.
 
-`counter()` 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수`decimal`)으로 뿌려집니다.
+예를 들어, `section` 이라는 이름의 역순 카운터를 기본 초기값으로 생성하기 위해서는 아래 문법처럼 작성할 수 있습니다.
 
-`counters()` 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수`decimal`)로 렌더링 됩니다.
+```css
+counter-reset: reversed(section);
+```
+
+물론 원하는 초기값을 지정할 수도 있습니다.
+
+카운터의 값은 {{cssxref("counter-increment")}} 의 음수값을 특정함에 따라 감소하게 됩니다.
+
+> **참고:** {{cssxref("counter-increment")}} 를 사용하여 역순이 아닌 카운터를 감소시킬 수 있습니다.
+> 역순 카운터의 주요 이점은 기본 초기값이며,`list-item` 카운터가 역순 카운터를 자동으로 감소시킨다는 점입니다.
+
+### 목록 요소의 카운터
+
+{{HTMLElement("ol")}} 요소로 생성된 것과 같은 순서가 있는 목록에서, 카운터는 암묵적으로 `list-item` 라는 이름을 갖습니다.
+
+다른 카운터들처럼 이 또한 0의 기본 초기값을 가지게 되는데, "요소의 숫자" 역시 역순 카운터의 초기값으로 쓰입니다.
+사용자가 지정한 카운터가 아니라면 `list-item` 은 카운터가 역순인지 아닌지 여부에 따라 자동적으로 각각의 요소에 대하여 1씩 증가하거나 감소하게 됩니다.
+
+`list-item` 카운터는 CSS 를 사용한 순서가 있는 목록의 기본 동작을 조작할 수도 있습니다.
+예를 들어 기본 초기값을 변경하거나, {{cssxref("counter-increment")}} 를 사용하여 목록 요소가 증가하거나 감소되는 것을 변경할 수 있습니다.
+
+## 예제
 
 ### 기본 예제
 
-여기서는 제목 앞에 숫자를 붙여봅니다.
+이 예제는 각 제목의 시작 부분에 "Section \[카운터 값]:"을 추가합니다.
 
 #### CSS
 
 ```css
 body {
-  counter-reset: section; /* counter 이름을 'section'으로 지정합니다.
-                                                   초깃값은 0입니다. */
+  counter-reset: section; /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
 }
 
 h3::before {
-  counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
-  content: "Section " counter(section) ": "; /* section의 카운터 값을 표시합니다. */
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
 }
 ```
 
 #### HTML
 
 ```html
-
Introduction

-
Body

-
Conclusion

+
도입

+
본문

+
결론

 ```
 
 #### 결과
 
 {{EmbedLiveSample("Basic_example", "100%", 150)}}
 
-### 더 정교한 예시
+### 기본 예제: 역순 카운터
 
-카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.
+이 예제는 위에서 본 예제와 동일하지만, 역순 카운터를 사용한다는 점만 다릅니다.
+만일 브라우저가 `reversed()` 함수 표기법을 지원한다면, 결과는 아래와 같이 보일 것입니다.
+
+![역순 카운터](reversed_headings_basic.png)
+
+#### CSS
+
+```css
+body {
+  counter-reset: reversed(
+    section
+  ); /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
+}
+
+h3::before {
+  counter-increment: section -1; /* section 카운터를 1씩 감소 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
+}
+```
+
+#### HTML
+
+```html
+
도입

+
본문

+
결론

+```
+
+#### 결과
+
+{{EmbedLiveSample("Basic example: reversed counter", "100%", 150)}}
+
+### 더 정교한 예제
+
+카운터는 증가할 때마다 반드시 표시될 필요는 없습니다.
+이 예제는 모든 링크를 세면서, 링크에 텍스트가 없을 때만 카운터를 표시하여 편리한 대체 방법으로 사용합니다.
 
 #### CSS
 
@@ -74,21 +228,20 @@ a[href]:empty::after {
 #### HTML
 
 ```html
-
See 

-
Do not forget to leave a message!

-
See also 

+
보기 

+
메시지를 남기는 것을 잊지 마세요!

+
같이 보기 

 ```
 
-#### Result
+#### 결과
 
 {{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}
 
-## 중첩 카운터
-
-CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
-
 ### 중첩 카운터 예제
 
+CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다.
+{{cssxref("counters", "counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
+
 #### CSS
 
 ```css
@@ -123,9 +276,9 @@ li::before {
           
  • item
    •   
         
         
      
-          
    1. item
      2.   
-          
    2. item
      3.   
-          
    3. item
      4.   
+          
    4. item
      5.   
+          
    5. item
      6.   
+          
    6. item
      7.   
         
    
       
       
  • item
    •       
@@ -148,8 +301,12 @@ li::before {
 
 {{Specifications}}
 
-## See also
+## 같이 보기
 
+- {{cssxref("contain")}}
 - {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
 - {{cssxref("counter-increment")}}
 - {{cssxref("@counter-style")}}
+- [CSS 카운터 스타일](/ko/docs/Web/CSS/CSS_counter_styles) 모듈
+- [CSS 목록과 카운터](/ko/docs/Web/CSS/CSS_lists) 모듈

From b73e329cd4cbaa8b6f7e2f88fb6c54d52dd8f9f3 Mon Sep 17 00:00:00 2001
From: Chanmin 
Date: Sun, 29 Sep 2024 21:46:35 +0900
Subject: [PATCH 021/148] docs(ko): Add Korean translation of fit-content
 (#23514)

* docs(ko): add korean translation of fit-content

* chore: translate code example

* fix: fix EmbedLiveSample

* chore: fix awkward translation

* chore: fix awkward translation

* chore: fix awkward translation

* Update files/ko/web/css/fit-content/index.md

* Update files/ko/web/css/fit-content/index.md

---------

Co-authored-by: hochan Lee 
---
 files/ko/web/css/fit-content/index.md | 73 +++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 files/ko/web/css/fit-content/index.md

diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md
new file mode 100644
index 00000000000000..e607b1374b2d9b
--- /dev/null
+++ b/files/ko/web/css/fit-content/index.md
@@ -0,0 +1,73 @@
+---
+title: fit-content
+slug: Web/CSS/fit-content
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다.
+
+{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용된 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다.
+
+> [!NOTE]
+> CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다.
+
+## 구문
+
+```css
+width: fit-content;
+block-size: fit-content;
+```
+
+## 예제
+
+### fit-content를 사용해 박스 크기 설정하기
+
+#### HTML
+
+```html
+
    
+  
    항목
    
+  
    더 많은 텍스트가 포함된 항목입니다.
    
+  
    
+    텍스트가 더 많이 포함된 항목입니다. 텍스트가 줄바꿈되기를 기대하며 충분한
+    양의 텍스트를 추가했습니다.
+  
    
+
    
+```
+
+#### CSS
+
+```css
+.container {
+  border: 2px solid #ccc;
+  padding: 10px;
+  width: 20em;
+}
+
+.item {
+  width: fit-content;
+  background-color: #8ca0ff;
+  padding: 5px;
+  margin-bottom: 1em;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample("fit-content를 사용해 박스 크기 설정하기", "100%", 200)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 연관된 크기 설정 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈

From a597efc3653d84debeb02e8bc910d9d7307af5fb Mon Sep 17 00:00:00 2001
From: Jongha Kim 
Date: Sun, 29 Sep 2024 21:46:46 +0900
Subject: [PATCH 022/148] =?UTF-8?q?[ko]=20RegExp.prototype.unicodeSets=20?=
 =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=EC=99=B8=20(#22898)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] RegExp.prototype.unicodeSets 신규 번역 외

- RegExp.prototype.unicodeSets 신규 번역
- String.prototype.at() 최신화

* 린트 에러 수정
---
 .../regexp/unicodesets/index.md               | 55 +++++++++++++++++++
 .../global_objects/string/at/index.md         | 16 +++---
 2 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md

diff --git a/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
new file mode 100644
index 00000000000000..c858de8b3b00f5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
@@ -0,0 +1,55 @@
+---
+title: RegExp.prototype.unicodeSets
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets
+l10n:
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
+---
+
+{{JSRef}}
+
+**`unicodeSets`** 접근자 속성은 {{jsxref("RegExp")}} 인스턴스의 속성으로, 이 정규 표현식에 `v` 플래그가 사용되었는지 여부를 반환합니다.
+
+## 설명
+
+`RegExp.prototype.unicodeSets`는 `v` 플래그가 사용된 경우 `true` 값을 가지며, 그렇지 않으면 `false`입니다. `v` 플래그는 [`u`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode) 플래그의 업그레이드 버전으로, 더 많은 유니코드 관련 기능을 활성화합니다. ("v"는 알파벳에서 "u" 다음 글자입니다.) `u`와 `v`는 동일한 정규식을 호환되지 않는 방식으로 해석하기 때문에, 두 플래그를 모두 사용하면 {{jsxref("SyntaxError")}}가 발생합니다. `v` 플래그를 사용하면 `u` 플래그 설명에 언급된 모든 기능과 함께 다음과 같은 추가 기능을 사용할 수 있습니다.
+
+- [`\p`](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) 이스케이프 시퀀스를 문자뿐만 아니라 문자열의 속성과도 일치시키는 데 사용할 수 있습니다.
+- [문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class) 구문이 업그레이드되어 교집합, 합집합, 차집합 구문을 허용하며, 여러 유니코드 문자와 일치시킬 수 있습니다.
+- 문자 클래스 보수 구문 `[^...]`은 일치 결과를 부정하는 대신 보수 클래스를 구성하여 대소문자 구분 없는 일치에서 일부 혼란스러운 동작을 피합니다. 자세한 내용은 [보수 클래스와 대소문자 구분 없는 일치](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#complement_classes_and_case-insensitive_matching)를 참조하세요.
+
+`u` 모드에서 유효했던 일부 정규식은 `v` 모드에서 유효하지 않습니다. 특히 문자 클래스 구문이 다르고 일부 문자는 더 이상 문자 그대로 나타날 수 없습니다. 자세한 내용은 [`v` 모드 문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#v-mode_character_class)를 참조하세요.
+
+> [!NOTE] > `v` 모드는 문자소를 단일 문자로 해석하지 않습니다. 여전히 다수의 코드 포인트입니다. 예를 들어, `/[🇺🇳]/v`는 여전히 `"🇺"`와 일치할 수 있습니다.
+
+`unicodeSets`의 설정자는 `undefined`입니다. 이 속성을 직접 변경할 수 없습니다.
+
+## 예제
+
+### unicodeSets 속성 사용하기
+
+```js
+const regex = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
+
+console.log(regex.unicodeSets); // true
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.hasIndices")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
+- {{jsxref("RegExp.prototype.unicode")}}
+- [문자열의 표기법 및 속성을 설정하는 RegExp v 플래그](https://v8.dev/features/regexp-v-flag) - v8.dev (2022)
diff --git a/files/ko/web/javascript/reference/global_objects/string/at/index.md b/files/ko/web/javascript/reference/global_objects/string/at/index.md
index f9e503496fbb0e..6a98427da6e9c4 100644
--- a/files/ko/web/javascript/reference/global_objects/string/at/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/at/index.md
@@ -1,11 +1,13 @@
 ---
 title: String.prototype.at()
 slug: Web/JavaScript/Reference/Global_Objects/String/at
+l10n:
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
-**`at()`** 메서드는 정수 값을 받아서 지정된 오프셋에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}을 반환합니다. 이 방법은 양의 정수와 음의 정수를 허용합니다. 음의 정수는 문자열의 마지막부터 셉니다.
+{{jsxref("String")}} 값의 **`at()`** 메서드는 정수 값을 받아 지정된 오프셋에 위치한 단일 UTF-16 코드 유닛으로 구성된 새로운 {{jsxref("String")}}을 반환합니다. 이 메서드는 양의 정수와 음의 정수를 모두 허용합니다. 음의 정수는 문자열의 마지막 문자부터 거꾸로 세어 위치를 지정합니다.
 
 {{EmbedInteractiveExample("pages/js/string-at.html")}}
 
@@ -18,11 +20,11 @@ at(index)
 ### 매개변수
 
 - `index`
-  - : 문자열에서 반환할 문자의 인덱스(위치)입니다. 인덱스로 음수를 전달할 때 문자열의 끝에서 상대적인 색인을 지원합니다. 즉, 음수가 사용되면 반환할 문자는 문자열의 끝에서 역으로 계산하여 찾습니다.
+  - : 반환할 문자열 문자의 인덱스(위치)입니다. 음수 인덱스를 전달하면 문자열 끝에서부터의 상대적 인덱싱을 지원합니다. 즉, 음수가 사용되면 반환되는 문자는 문자열의 끝에서부터 거꾸로 세어 찾아집니다.
 
 ### 반환 값
 
-지정된 위치에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}. 만약 주어진 인덱스를 찾을 수 없는 경우 {{jsxref('undefined')}}을 반환합니다.
+지정된 위치에 있는 단일 UTF-16 코드 유닛으로 구성된 {{jsxref("String")}}을 반환합니다. 주어진 인덱스를 찾을 수 없으면 {{jsxref("undefined")}}를 반환합니다.
 
 ## 예제
 
@@ -35,6 +37,7 @@ at(index)
 function returnLast(arr) {
   return arr.at(-1);
 }
+
 let invoiceRef = "myinvoice01";
 
 console.log(returnLast(invoiceRef)); // '1'
@@ -46,7 +49,7 @@ console.log(returnLast(invoiceRef)); // '2'
 
 ### 메서드 비교하기
 
-여기서 {{jsxref('String')}}의 끝에서 두 번째 문자를 선택하는 다양한 방법을 비교하겠습니다. 아래의 모든 방법이 유효하며, 싱대적으로 `at()`의 간결함과 가독성이 돋보입니다.
+여기서는 {{jsxref("String")}}의 끝에서 두 번째(마지막에서 하나 앞) 문자를 선택하는 다양한 방법을 비교합니다. 아래의 모든 방법이 유효하지만, 이는 `at()` 메서드의 간결성과 가독성을 강조합니다.
 
 ```js
 const myString = "Every green bus drives fast.";
@@ -64,7 +67,7 @@ const atWay = myString.at(-2);
 console.log(atWay); // 't'
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -74,8 +77,7 @@ console.log(atWay); // 't'
 
 ## 같이 보기
 
-- [Polyfill of `String.prototype.at` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- [A polyfill for the at() method](https://github.com/tc39/proposal-relative-indexing-method#polyfill).
+- [`core-js`에서의 `String.prototype.at` 폴리필](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
 - {{jsxref("String.prototype.indexOf()")}}
 - {{jsxref("String.prototype.lastIndexOf()")}}
 - {{jsxref("String.prototype.charCodeAt()")}}

From 25752cc097e68c9b1b097fd36aa7d11257749e23 Mon Sep 17 00:00:00 2001
From: Bang HoJin <132210541+banhogu@users.noreply.github.com>
Date: Sun, 29 Sep 2024 21:57:16 +0900
Subject: [PATCH 023/148] [ko] translate learn/common_questions (#23046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ko_learn_common_questions 번역
---
 files/ko/learn/common_questions/index.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 files/ko/learn/common_questions/index.md

diff --git a/files/ko/learn/common_questions/index.md b/files/ko/learn/common_questions/index.md
new file mode 100644
index 00000000000000..1159c1a56538a0
--- /dev/null
+++ b/files/ko/learn/common_questions/index.md
@@ -0,0 +1,17 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+l10n:
+  sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3
+---
+
+{{LearnSidebar}}
+
+해당 학습 영역의 섹션은 [HTML](/ko/docs/Learn/HTML)이나 [CSS](/ko/docs/Learn/CSS)와 같은 구조화된 핵심 학습 경로의 일부는 아니지만, 자주 묻는 질문에 대한 답변을 제공하기 위해 만들어졌습니다. 아래의 글들은 독립적으로 읽고 이해할 수 있도록 작성되었습니다.
+
+- [HTML 관련 질문](/ko/docs/Learn/HTML/Howto)
+- [CSS 관련 질문](/ko/docs/Learn/CSS/Howto)
+- [JavaScript 관련 질문](/ko/docs/Learn/JavaScript/Howto)
+- [웹 메커니즘](/ko/docs/Learn/Common_questions/Web_mechanics)
+- [도구 및 설정](/ko/docs/Learn/Common_questions/Tools_and_setup)
+- [디자인 및 접근성](/ko/docs/Learn/Common_questions/Design_and_accessibility)

From eeb4b62db383ad194f18bf82dd38636245cf2545 Mon Sep 17 00:00:00 2001
From: Vivi 
Date: Sun, 29 Sep 2024 22:03:39 +0900
Subject: [PATCH 024/148] =?UTF-8?q?[ko]=20=20css=20image=20set=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#23318)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [feat] ko css image set 신규 번역

* [fix] comment
---
 files/ko/web/css/image/image-set/index.md | 111 ++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 files/ko/web/css/image/image-set/index.md

diff --git a/files/ko/web/css/image/image-set/index.md b/files/ko/web/css/image/image-set/index.md
new file mode 100644
index 00000000000000..0cc3a6932f0c1d
--- /dev/null
+++ b/files/ko/web/css/image/image-set/index.md
@@ -0,0 +1,111 @@
+---
+title: image-set()
+slug: Web/CSS/image/image-set
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`image-set()`** [CSS](/ko/docs/Web/CSS) [함수형](/ko/docs/Web/CSS/CSS_Functions) 표기법은 브라우저가 높은 해상도를 위해 주어진 이미지 집합 안에서 가장 적합한 CSS를 선택하도록 할 수 있는 방법입니다.
+
+해상도와 대역폭은 기기와 네트워크 접근에 따라 달라집니다. `image-set()` 함수는 가장 적합한 해상도의 이미지를 사용자의 기기로 전달하여 기기와 설정에 따른 적합한 이미지를 선택할 수 있도록 하는데, 이는 해상도와 이미지 옵션의 집합을 제공하고 각 이미지에는 해상도 정의도 연관되어 있습니다. 해상도는 파일 크기에 따라 프록시로도 사용될 수 있습니다. 느린 모바일 연결이지만 높은 해상도의 화면을 가진 사용자 에이전트는 고해상도 이미지의 로드를 기다리는 것보다 저해상도 이미지를 선호할 수도 있습니다.
+
+`image-set()` 은 각각의 사용자가 필요로 하는 것을 결정하기 보다는 선택할 수 있는 옵션을 제공합니다.
+
+## 구문
+
+```css-nolint
+/* 해상도를 기반으로 이미지 선택하기 */
+image-set(
+  "image1.jpg" 1x,
+  "image2.jpg" 2x
+);
+
+image-set(
+  url("image1.jpg") 1x,
+  url("image2.jpg") 2x
+);
+
+/* 해상도를 기반으로 그라디언트 선택하기 */
+image-set(
+  linear-gradient(blue, white) 1x,
+  linear-gradient(blue, green) 2x
+);
+
+/* 지원하는 확장자를 기반으로 이미지 선택하기 */
+image-set(
+  url("image1.avif") type("image/avif"),
+  url("image2.jpg") type("image/jpeg")
+);
+```
+
+### 값
+
+- ``
+  - : [``](/ko/docs/Web/CSS/image) 태그는 이미지 집합을 제외하고서는 어떠한 이미지 타입도 될 수 있습니다. `image-set()` 함수는 다른 `image-set()` 함수 내에 중첩될 수 없습니다.
+- ``
+  - : 이미지의 URL입니다.
+- `` {{optional_inline}}
+  - : [``](/ko/docs/Web/CSS/resolution) 태그는 픽셀 당 도트 단위인 `x` 혹은 `dppx` 를 포함하여 인치 당 도트 단위인 `dpi`, 센티미터 당 도트 단위인 `dpcm` 등 단위를 나타냅니다. `image-set()` 내의 모든 이미지는 고유한 해상도를 가져야 합니다.
+- `type()` {{optional_inline}}
+  - : "image/jpeg" 와 같은 유효한 MIME 타입의 문자열입니다.
+
+### 형식 구문
+
+{{csssyntax}}
+
+## 접근성
+
+브라우저는 배경 이미지에 대한 특수한 정보를 보조 기술로 제공하지 않습니다. 이는 주로 화면 리더기를 위한 기능인데, 스크린 리더는 배경 이미지의 존재를 알리지 않기 때문에 사용자는 아무런 정보를 전달 받을 수 없습니다. 만일 이미지에 페이지의 전반적인 목적을 이해하는 데에 중요한 정보가 포함되어 있다면 이를 문서 안에서 의미론적으로 설명하는 것이 좋습니다.
+
+- [MDN WCAG 이해하기, 가이드라인 1.1 설명](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [Success Criterion 1.1.1 이해하기 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 예제
+
+### background-image 옵션으로 대안으로 image-set()를 사용하기
+
+이 예제는 [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) 가 두 개의 {{cssxref("background-image")}} 옵션의 대안, 즉 일반적인 버전과 고해상도 버전의 해상도를 어떻게 제공하는지에 대해 설명합니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}}
+
+> [!NOTE]
+> 위 예제에서처럼, `-webkit` 접미사는 크롬과 사파리에서도 사용할 수 있습니다. 파이어폭스 90에서는 (개발자가 표준 속성을 추가하지 않은 경우 호환성을 제공하기 위해) `-webkit-image-set()` 가 `image-set()` 의 별칭으로 사용됩니다.
+
+### 이미지 확장자의 대안으로 image-set()를 사용하기
+
+다음 예제에서는 `type()` 함수가 AVIF 와 JPEG 확장자를 전달하기 위해 사용될 수도 있음을 설명합니다. 만일 브라우저가 avif를 지원한다면 이는 해당 버전을 선택하게 되고, 그렇지 않다면 jpeg 버전을 사용하게 됩니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}}
+
+#### 폴백 제공하기
+
+`image-set()` 을 위한 내장 폴백은 존재하지 않습니다. 이 기능을 지원하지 않는 브라우저를 위해 {{cssxref("background-image")}} 를 포합하려면 `image-set()` 를 사용하는 줄 앞에 별도의 정의가 필요합니다.
+
+```css
+.box {
+  background-image: url("large-balloons.jpg");
+  background-image: image-set(
+    "large-balloons.avif" type("image/avif"),
+    "large-balloons.jpg" type("image/jpeg")
+  );
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{cssxref("image")}}
+- {{cssxref("image/image", "image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("url", "url()")}}
+- {{cssxref("<gradient>")}}
+- {{cssxref("cross-fade", "cross-fade()")}}

From 1b0002bca6224d67b2ff3b338b0f946168841b87 Mon Sep 17 00:00:00 2001
From: Yoon 
Date: Sun, 29 Sep 2024 22:03:55 +0900
Subject: [PATCH 025/148] =?UTF-8?q?[ko]=20Center=20an=20element=20?=
 =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20=20(#23378)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ko\web\css\layout_cookbook\Center an element 번역

* page-type 삭제, mdn 링크 및 번역 내용 수정

* lint 이슈 해결

* Update files/ko/web/css/layout_cookbook/center_an_element/index.md

* Update files/ko/web/css/layout_cookbook/center_an_element/index.md

---------

Co-authored-by: hochan Lee 
---
 .../center_an_element/index.md                | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 files/ko/web/css/layout_cookbook/center_an_element/index.md

diff --git a/files/ko/web/css/layout_cookbook/center_an_element/index.md b/files/ko/web/css/layout_cookbook/center_an_element/index.md
new file mode 100644
index 00000000000000..a1c12ce0aa6bff
--- /dev/null
+++ b/files/ko/web/css/layout_cookbook/center_an_element/index.md
@@ -0,0 +1,98 @@
+---
+title: 요소의 중앙 정렬
+slug: Web/CSS/Layout_cookbook/Center_an_element
+l10n:
+  sourceCommit: 70f49e78d0f6830748fcaa490d98b4ae3e2da161
+---
+
+{{CSSRef}}
+
+이 조리법에서는 [flex 박스](#using_flexbox)와 [그리드](#using_grid)를 사용해서 박스를 다른 박스 내부에 중앙 정렬하는 방법을 배울 수 있습니다. 수평과 수직으로 중앙 정렬하는 것은 간단하고 직관적입니다.
+
+![an element centered inside a larger box](cookbook-center.png)
+
+## 요구 사항
+
+박스 내부의 아이템을 수평과 수직 방향으로 중앙 정렬합니다.
+
+## 조리법
+
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
+
+> [!CALLOUT]
+>
+> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
+
+## 플렉스박스 사용하기
+
+박스를 다른 박스 내부에서 중앙 정렬하기 위해서는 먼저 감싸고 있는 박스에 {{cssxref("display")}} 속성을 `flex`로 지정해서 [flex 컨테이너](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#the_flex_container) 로 바꿔줍니다. 그 다음에 {{cssxref("align-items")}}를 `center`로 지정하여 수직 방향의 중앙 정렬(블록 축)을 하고, {{cssxref("justify-content")}}를 `center`로 설정하여 수평 방향의 중앙 정렬(인라인 축)을 합니다. 그러면 박스를 다른 박스 내부에서 중앙 정렬하는 데 필요한 모든 작업이 완료됩니다!
+
+### HTML
+
+```html
+
    
+  
    I am centered!
    
+
    
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 8em;
+}
+```
+
+컨테이너의 높이를 지정하면 컨테이너 내부의 아이템이 실제로 수직 방향으로 중앙 정렬된 것을 확인할 수 있습니다.
+
+### 결과
+
+{{ EmbedLiveSample('Using_flexbox', 400, 200) }}
+
+컨테이너에 `align-items: center;`를 적용하는 대신, 내부 아이템에 {{cssxref("align-self")}}를 `center`로 지정해서 내부 아이템 자체를 수직으로 중앙 정렬할 수 있습니다.
+
+## 그리드 사용
+
+박스를 다른 박스 내부에서 중앙 정렬하는 또 다른 방법은 감싸고 있는 박스를 [그리드 컨테이너](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_container)로 만들고 {{cssxref("place-items")}} 속성을 `center`로 지정해서 내부의 아이템들을 블록과 인라인 축에서 중앙 정렬 하는 것입니다.
+
+### HTML
+
+```html
+
    
+  
    I am centered!
    
+
    
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: grid;
+  place-items: center;
+  height: 8em;
+}
+```
+
+### 결과
+
+{{ EmbedLiveSample('Using_grid', 400, 200) }}
+
+컨테이너에 `place-items: center;`를 적용하는 대신, 컨테이너에 {{cssxref("place-content", "place-content: center;")}}를 지정하거나 내부 아이템 자체에 {{cssxref("place-self", "place-self: center")}} 또는 {{cssxref("margin", "margin: auto;")}}를 지정하여 동일하게 중앙 정렬을 할 수 있습니다.
+
+## MDN 관련 문서
+
+- [Box alignment in flexbox](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [CSS box alignment guide](/ko/docs/Web/CSS/CSS_box_alignment)

From 712d48982714267eac7bd1ca3a91686cc9f2c270 Mon Sep 17 00:00:00 2001
From: Chanmin 
Date: Sun, 29 Sep 2024 22:19:11 +0900
Subject: [PATCH 026/148] docs(ko/webextensions): add korean translation of
 'user_interface' page (#23248)

---
 .../webextensions/user_interface/index.md     | 215 ++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 files/ko/mozilla/add-ons/webextensions/user_interface/index.md

diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
new file mode 100644
index 00000000000000..c2662e022bacdd
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
@@ -0,0 +1,215 @@
+---
+title: 사용자 인터페이스
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+l10n:
+  sourceCommit: 668b38a4f6cd96609b9a969fe4653b46aec4e712
+---
+
+{{AddonSidebar}}
+
+WebExtension API를 사용하는 확장 프로그램은 사용자에게 기능을 제공할 수 있도록 몇몇 사용자 인터페이스 옵션을 제공합니다. 이러한 옵션들의 요약은 아래에 제공되며, 각 사용자 인터페이스 옵션에 대한 자세한 소개는 이 섹션에서 다룹니다.
+
+> [!NOTE]
+> 확장 프로그램에서 UI 컴포넌트를 사용해 훌륭한 사용자 경험을 만들기 위한 조언을 얻고 싶다면 [User experience best practices](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/)를 참고하세요.
+
+
+  
+    
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+       
+      
+    
+    
+      
+       
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+
+  
+
    UI 옵션내용예시
    
+        툴바 버튼
+        (브라우저 동작)
+      
+        클릭했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 툴바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보입니다.
+      
+        툴바(브라우저 동작) 버튼을 보여주는 예시
+      
    
+        팝업이 있는 툴바 버튼
+      
+       브라우저 툴바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      
+        툴바 버튼의 팝업 예시
+      
    
+        주소 바 버튼
+        (페이지 동작)
+      
+        클랙했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 주소 바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보이지 않습니다.
+      
+        주소 바 버튼(페이지 액션)을 보여주는 예시
+      
    
+        팝업이 있는 주소 바 버튼
+      
+        주소 바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      
+        주소 바 버튼의 팝업 예시
+      
    
+        맥락 메뉴 항목
+      
+        하나 이상의 브라우저 맥락 메뉴의 메뉴 항목, 체크박스, 라디오 버튼입니다. 또한, 구분선을 추가하여 메뉴를 구조화할 수도 있습니다. 메뉴 항목들이 클릭되면 이벤트가 확장 프로그램에 전달됩니다.
+      
+         context-menu-demo 예제에서 WebExtension이 추가한 컨텍스트 메뉴 항목의 예시
+      
    
+        사이드바
+      
+         
    
+          웹 페이지 옆에 표시되는 HTML 문서로 페이지마다 고유한 콘텐츠를 표시할 수 있습니다. 사이드바는 확장 프로그램이 설치될 때 열리며, 이후 사용자의 사이드바 가시성 선택을 따릅니다. 사이드바 내의 사용자 상호작용은 해당 HTML 문서에서 처리됩니다.
+        
    
+          		사이드바의 예시
    
+        옵션 페이지
+      
+        확장 프로그램의 설정을 정의할 수 있는 페이지로 사용자가 이 설정을 변경할 수 있습니다.
+        사용자는 브라우저의 애드온 관리자에서 이 페이지에 접근할 수 있습니다.
+      
+        즐겨찾는 색상 예시에서 옵션 페이지에 추가된 내용을 보여주는 예시.
+      
    
+        확장 프로그램 페이지
+      
+       확장 프로그램에 포함된 웹 페이지를 사용하여 창이나 탭 내에서 양식, 도움말 또는 필요한 기타 콘텐츠를 제공할 수 있습니다.
+      
+        분리된 패널로 표시되는 간단한 번들 페이지의 예시
+      
    
+        알림
+      
+        운영체제의 알림 메커니즘을 통해 사용자에게 표시되는 일시적인 알림입니다. 사용자가 알림을 클릭하거나 알림이 자동으로 또는 사용자의 요청으로 닫힐 때, 확장 프로그램으로 이벤트가 전달됩니다.
+      
+        확장 프로그램에 의해 트리거된 시스템 알림의 예시
+      
    
+        주소 바 제안
+      
+        사용자가 키워드를 입력할 때 맞춤 주소 표시줄 제안을 제공합니다.
+      
+        firefox_code_search 확장 프로그램이 주소 표시줄 제안을 커스터마이즈한 결과를 보여주는 예시.
+      
    
+        개발자 도구 패널
+      
+        브라우저의 개발자 도구에 표시되는 HTML 문서가 연결된 탭.
+      
+        Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+      
    
+
+다음의 사용 방법 가이드에서는 이러한 사용자 인터페이스 옵션 중 일부를 만드는 방법을 단계별로 안내합니다.
+
+- [접근성 가이드라인](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/)
+- [툴바에 버튼 추가하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar)
+- [브라우저 스타일](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
+- [개발자 도구 확장하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
+- [설정 페이지 구현하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)

From 167044766d1c3ac4a017421c048e47e41e6d4d58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=85=B8=ED=98=84=EC=A3=BC?=
 <38433755+nohj0518@users.noreply.github.com>
Date: Sun, 29 Sep 2024 22:30:01 +0900
Subject: [PATCH 027/148] =?UTF-8?q?[ko]=20document.scripts=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#23661)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] document.scripts 신규 번역

* fix translate

* fix translate
---
 files/ko/web/api/document/scripts/index.md | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 files/ko/web/api/document/scripts/index.md

diff --git a/files/ko/web/api/document/scripts/index.md b/files/ko/web/api/document/scripts/index.md
new file mode 100644
index 00000000000000..3d91925219767b
--- /dev/null
+++ b/files/ko/web/api/document/scripts/index.md
@@ -0,0 +1,34 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+l10n:
+  sourceCommit: 904f8c3d9c8a54e917f8db565bcfe58f976d859c
+---
+
+{{APIRef("DOM")}}
+
+**`scripts`** 는 {{domxref("Document")}}인터페이스의 속성으로 문서 중{{HTMLElement("script")}} 요소의 목록을 반환합니다. 반환되는 객체는 단일 {{domxref("HTMLCollection")}} 객체입니다.
+
+## 값
+
+{{domxref("HTMLCollection")}}입니다. 이를 사용하여 목록의 모든 요소를 배열처럼 가져올 수 있습니다.
+
+## 예제
+
+다음은 페이지 내 {{HTMLElement("script")}} 요소의 존재를 확인하는 예시입니다.
+
+```js
+let scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}

From a36d8064f6ac13c0e15f356ab23013b04f9ca07f Mon Sep 17 00:00:00 2001
From: MaakCode 
Date: Sun, 29 Sep 2024 22:49:20 +0900
Subject: [PATCH 028/148] [Ko] translate
 learn/javascript/building_blocks/event_bubbling (#23202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[ko] Event Bubbling 신규 번역
---
 .../building_blocks/event_bubbling/index.md   | 417 ++++++++++++++++++
 1 file changed, 417 insertions(+)
 create mode 100644 files/ko/learn/javascript/building_blocks/event_bubbling/index.md

diff --git a/files/ko/learn/javascript/building_blocks/event_bubbling/index.md b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
new file mode 100644
index 00000000000000..c1fdd5a269d22f
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
@@ -0,0 +1,417 @@
+---
+title: 이벤트 버블링
+slug: Learn/JavaScript/Building_blocks/Event_bubbling
+l10n:
+  sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+
+웹 페이지는 제목, 텍스트 단락, 이미지, 버튼 등 "요소"로 구성되어 있으며 이러한 요소에 발생하는 이벤트를 수신할 수 있다는 것을 살펴보았습니다. 예를 들어, 버튼에 수신기를 추가하면 사용자가 버튼을 클릭했을 때 실행됩니다.
+
+또한 이러한 요소가 서로 "중첩"될 수 있다는 것을 보았습니다. 예를 들어, {{htmlelement("button")}}은 {{htmlelement("div")}} 요소 안에 놓일 수 있습니다. 이 때 `
    ` 요소를 "부모" 요소라고 부르고 `
+
    
+
    
+```
+
+여기서 버튼은 다른 요소인 {{HTMLElement("div")}} 안에 있습니다. 이 `
    ` 요소는 내부에 포함된 요소의 **부모**라고 합니다. 부모에 클릭 이벤트 처리기를 추가한 다음 버튼을 클릭하면 어떻게 될까요?
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 부모가 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+DIV 요소를 클릭했습니다.
+```
+
+버튼이 `
    ` 안에 있으므로 버튼을 클릭하면 암시적으로 버튼 안에 있는 요소도 클릭하게 됩니다.
+
+### 버블링 예제
+
+버튼과 부모 "둘 다" 이벤트 수신기를 추가하면 어떻게 될까요?
+
+```html
+
+  
    
+    
+  
    
+  
    
+
+```
+
+버튼과 부모(`
    `), 그리고 두 요소를 모두 포함하는 {{HTMLElement("body")}} 요소에 클릭 이벤트 처리기를 추가해 보겠습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 세 요소 모두 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+BUTTON 요소를 클릭했습니다.
+DIV 요소를 클릭했습니다.
+BODY 요소를 클릭했습니다.
+```
+
+이 경우는 다음과 같습니다.
+
+- 버튼 클릭이 먼저 일어납니다.
+- 그 다음에 부모(`
    ` 요소) 클릭이 일어납니다.
+- 그리고 `
    ` 요소의 부모(`` 요소) 클릭이 일어납니다.
+
+이를 이벤트가 클릭한 가장 안쪽의 요소에서 **상위로 버블링**된다고 설명할 수 있습니다.
+
+이 동작은 유용할 수도 있고 예상치 못한 문제를 일으킬 수도 있습니다. 다음 섹션에서는 이로 인해 발생하는 문제를 살펴보고 해결책을 찾아보겠습니다.
+
+### 동영상 플레이어 예제
+
+이 예제에서 페이지에 처음에는 숨겨져있는 동영상과 "동영상 표시"라는 버튼이 있습니다. 우리는 다음과 같은 상호작용을 원합니다.
+
+- 사용자가 "동영상 표시" 버튼을 클릭하면 동영상이 포함된 상자를 표시하지만 재생하지는 않습니다.
+- 사용자가 동영상을 클릭하면 재생합니다.
+- 사용자가 동영상 외부의 상자 어딘가를 클릭하면 상자를 숨깁니다.
+
+HTML은 다음과 같습니다.
+
+```html
+
+
+
+```
+
+HTML에는 다음이 포함됩니다.
+
+- `
+
+
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+## 이벤트 캡처
+
+이벤트 전파의 또 다른 형태로 "이벤트 캡처"가 있습니다. 이것은 이벤트 버블링과 비슷하지만 순서가 반대입니다. 즉, 이벤트가 대상의 가장 안쪽의 대상 요소에서 발생해서 그 다음으로 중첩이 적은 요소순으로 전파되는게 아니라, 반대로 "가장 적게 중첩된" 요소에서 발생해서 그 다음으로 중첩이 많은 요소순으로 대상에 도달할 때까지 전파됩니다.
+
+이벤트 캡처는 기본적으로 비활성화되어 있습니다. 활성화하려면 `addEventListener()`에서 `capture` 옵션을 전달해야 합니다.
+
+이 예제는 `capture` 옵션을 사용한다는 점을 제외하면 앞서 본 [버블링 예제](#버블링_예제)와 동일합니다.
+
+```html
+
+  
    
+    
+  
    
+  
    
+
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
+
+이 경우 메시지 순서는 반대입니다. `` 이벤트 처리기가 먼저 실행되고, 그 다음에 `
    ` 이벤트 처리기가 실행되고, 그 다음에 `
+  
    
+  
    
+
+```
+
+JavaScript는 `target`과 `currentTarget`을 모두 로깅하는것 외에는 거의 같습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  const logTarget = `Target: ${e.target.tagName}`;
+  const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`;
+  output.textContent += `${logTarget}, ${logCurrentTarget}\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+버튼을 클릭했을 때, 이벤트 처리기가 버튼 자체나 `
    ` 또는 `` 에 연결되어 있어도 `target` 은 항상 버튼 요소라는 점을 주의하세요. 그러나 `currentTarget`은 현재 실행중인 이벤트 처리기의 요소로 식별됩니다.
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` 속성은 위의 [이벤트 위임](#이벤트_위임) 예제처럼 이벤트 위임에서 자주 사용합니다.
+
+## 스킬 테스트!
+
+이 문서의 마지막까지 왔습니다. 그런데 가장 중요한 정보를 기억하고 있나요? 계속하기 전에 이 정보를 기억했는지 확인하려면 [스킬 테스트: 이벤트](/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)를 참조하세요.
+
+## 요약
+
+이제 이 초기 단계에서 웹 이벤트에 대해 알아야 할 모든 것을 알게 되었을 것입니다.
+앞서 언급했듯이 이벤트는 코어 JavaScript의 일부가 아니며 브라우저 웹 API에서 정의되어 있습니다.
+
+또한 웹 API에서부터 브라우저 WebExtensions, Node.js(서버 측 JavaScript)와 같은 다른 영역에 이르기까지 JavaScript를 사용하는 맥락에 따라 다양한 이벤트 모델이 있다는 것을 이해하는 것이 중요합니다.
+지금 당장 이 모든 영역을 이해할 것으로 기대하지는 않지만 웹 개발을 배우면서 이벤트의 기본을 이해하는 데 확실히 도움이 됩니다.
+
+> [!NOTE]
+> 진행중에 막혔다면 [커뮤니케이션 채널](/ko/docs/MDN/Community/Communication_channels)에서 도움을 요청하세요.
+
+## 같이 보기
+
+- [domevents.dev](https://domevents.dev/) — 탐색을 통해 DOM 이벤트 시스템의 동작에 대해 학습할 수 있는 매우 유용한 대화형 놀이터 앱입니다.
+- [이벤트 참고서](/ko/docs/Web/Events)
+- [이벤트 순서](https://www.quirksmode.org/js/events_order.html) (캡처링과 버블링에 대한 논의) — 피터-폴 코흐가 매우 자세하게 설명한 글입니다.
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

From 34e885048163ed9487d08ca2cf8829369dba75ec Mon Sep 17 00:00:00 2001
From: Wongilk <108254103+Wongilk@users.noreply.github.com>
Date: Sun, 29 Sep 2024 23:01:47 +0900
Subject: [PATCH 029/148] =?UTF-8?q?[ko]=20Javascript=20try=5Fcatch?=
 =?UTF-8?q?=EB=AC=B8=20=EB=B2=88=EC=97=AD=20=20(#21760)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* translate_ko_try_catch

* delete page-type, browser-compat

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

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

* Update files/ko/web/javascript/reference/statements/try...catch/index.md

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

---------

Co-authored-by: hochan Lee 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../reference/statements/try...catch/index.md | 314 ++++++++++++++++++
 1 file changed, 314 insertions(+)
 create mode 100644 files/ko/web/javascript/reference/statements/try...catch/index.md

diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.md b/files/ko/web/javascript/reference/statements/try...catch/index.md
new file mode 100644
index 00000000000000..30ba3a337c7a0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/try...catch/index.md
@@ -0,0 +1,314 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+l10n:
+  sourceCommit: 4e947e81afc753bedcaaba75f262a07b92511849
+---
+
+{{jsSidebar("Statements")}}
+
+**`try...catch`** 문은 `try` 블록과 `catch` 블록, `finally` 블록 중 하나 혹은 두 블록으로 구성됩니다. `try` 블록 내 코드가 먼저 실행되고, 만약 그 안에서 예외가 발생한다면 `catch` 블록 내 코드가 실행됩니다. `finally` 블록 내 코드는 항상 실행되며, 제어 흐름이 전체 구문을 종료하기 전에 실행됩니다.
+
+{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+
+## 문법
+
+```js-nolint
+try {
+  tryStatements
+} catch (exceptionVar) {
+  catchStatements
+} finally {
+  finallyStatements
+}
+```
+
+- `tryStatements`
+  - : `try` 블록에서 실행될 구문들입니다.
+- `catchStatements`
+  - : `try` 블록에서 예외가 발생했을 때 실행될 구문들입니다.
+- `exceptionVar` {{optional_inline}}
+  - : 해당 `catch` 블록에서 잡힌 예외를 담는 선택적 [식별자 혹은 패턴](#catch_binding)입니다. 만약 `catch` 블록에서 예외 값을 사용하지 않는 경우 `exceptionVar` 과 괄호를 생략할 수 있습니다.
+- `finallyStatements`
+  - : `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 실행되는 구문들입니다. 예외가 발생했는지 여부와 관계없이 항상 실행됩니다.
+
+## 설명
+
+`try` 문은 항상 `try` 블록으로 시작합니다. 그리고 `catch` 블록 또는 `finally` 블록 중 하나가 반드시 존재해야 합니다. `catch` 블록과 `finally` 블록을 모두 가질 수도 있습니다. 이렇게 해서 `try` 문에는 다음과 같은 세 가지 형태가 있습니다.
+
+- `try...catch`
+- `try...finally`
+- `try...catch...finally`
+
+다른 구조인 [`if`](/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`for`](/ko/docs/Web/JavaScript/Reference/Statements/for)와 달리, `try`, `catch`, `finally` 블록은 반드시 단일 구문이 아닌 중괄호 {} 로 감싸진 블록이어야 합니다.
+
+```js-nolint example-bad
+try doSomething(); // SyntaxError
+catch (e) console.log(e);
+```
+
+`catch` 블록에는 `try` 블록에서 예외가 발생했을 때 어떻게 처리할지에 대한 구문들이 포함됩니다. 만약 `try` 블록 내의 어떤 구문(또는 `try` 블록 내에서 호출된 함수)에서 예외가 발생하면, 제어 흐름이 즉시 `catch` 블록으로 전환됩니다. `try` 블록에서 예외가 발생하지 않으면 `catch` 블록은 실행되지 않습니다.
+
+`finally` 블록은 `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 항상 실행됩니다. 즉 예외가 발생했는지 여부와 관계없이, `finally` 블록은 항상 실행됩니다.
+
+하나 이상의 `try` 문을 중첩해서 사용할 수 있습니다. 내부 `try` 문에 `catch` 블록이 없는 경우, 외부 `try` 문의 `catch` 블록이 대신 사용됩니다. 즉, 즉, 중첩된 `try` 문 내에서 예외가 발생하면, 가장 가까운 상위 `catch` 블록이 해당 예외를 처리하게 됩니다.
+
+또한, `try` 문을 사용하여 JavaScript 예외를 처리할 수 있습니다. JavaScript 예외 처리에 대한 자세한 정보는 [JavaScript 안내서](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements)를 참고하시면 됩니다.
+
+### Catch 바인딩
+
+`try` 블록에서 예외가 발생하면, `exceptionVar`(즉, `catch (e)` 에서의 `e`)에 예외 값이 저장됩니다. 이 {{Glossary("binding")}}을 이용해 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 {{Glossary("binding")}}은 `catch` 블록의 {{Glossary("Scope", "scope")}} 내에서만 사용할 수 있습니다.
+
+`exceptionVar`는 반드시 단일 식별자일 필요가 없습니다. [구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 사용하여 여러 개의 식별자를 한 번에 할당할 수 있습니다.
+
+```js
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  console.log(name); // "TypeError"
+  console.log(message); // "oops"
+}
+```
+
+`catch` 절에 의해 생성된 바인딩은 `catch` 블록과 동일한 범위에 존재합니다. 따라서 catch 블록 내에서 선언된 변수는 `catch` 절에 의해 생성된 바인딩과 동일한 이름을 가질 수 없습니다. ([이 규칙에 한가지 예외가 있지만](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#statements), 이는 더 이상 사용되지 않는 문법입니다.)
+
+```js-nolint example-bad
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  var name; // SyntaxError: Identifier 'name' has already been declared
+  let message; // SyntaxError: Identifier 'message' has already been declared
+}
+```
+
+예외 바인딩은 쓰기 가능합니다. 예를 들어, 예외 값을 정규화하여 {{jsxref("Error")}} 객체인지 확인할 수 있습니다.
+
+```js
+try {
+  throw "Oops; this is not an Error object";
+} catch (e) {
+  if (!(e instanceof Error)) {
+    e = new Error(e);
+  }
+  console.error(e.message);
+}
+```
+
+예외 값이 필요 없는 경우에는 괄호와 함께 예외 변수 자체를 생략할 수 있습니다.
+
+```js
+function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+```
+
+### finally 블록
+
+`finally` 블록은 `try` 블록과 `catch` 블록(들)이 실행된 후에 실행할 구문들을 포함하지만, `try...catch...finally` 블록 다음의 구문들보다 먼저 실행됩니다. 제어 흐름은 항상 `finally` 블록으로 진입하며, 다음과 같은 방식 중 하나로 진행될 수 있습니다.
+
+- `try` 블록이 정상적으로 실행을 마치고 (예외가 발생하지 않은 경우)
+- `catch` 블록이 정상적으로 실행을 마치고
+- `try` 블록이나 `catch` 블록에서 제어 흐름 구문(`return`, `throw`, `break`, `continue`)이 실행되어 해당 블록을 벗어나기 직전에
+
+예외를 처리할 `catch` 블록이 없더라도 `try` 블록에서 예외가 발생한다면 `finally` 블록은 실행됩니다. 이러한 경우 `finally` 블록이 실행을 마친 직후 해당 예외가 다시 던져집니다.
+
+다음 예제는 finally 블록의 한 가지 사용 사례를 보여줍니다. 이 코드는 파일을 열고 그 파일을 사용하는 구문들을 실행합니다. 그리고 `finally` 블록은 예외가 발생했더라도 파일이 항상 닫히도록 보장합니다.
+
+```js
+openMyFile();
+try {
+  // tie up a resource
+  writeMyFile(theData);
+} finally {
+  closeMyFile(); // always close the resource
+}
+```
+
+`finally` 블록 내의 제어 흐름 구문(`return`, `throw`, `break`, `continue`)은 `try` 블록이나 `catch` 블록의 완료 값을 "가립니다". 아래 예시에서, `try`블록에서 1을 반환하려고 하지만, 반환하기 전에 제어 흐름이 `finally`블록에 먼저 전달되어 `finally` 블록의 반환 값(2)이 대신 반환됩니다.
+
+```js
+function doIt() {
+  try {
+    return 1;
+  } finally {
+    return 2;
+  }
+}
+
+doIt(); // returns 2
+```
+
+`finally` 블록 내에 제어 흐름 구문을 사용하는 것은 일반적으로 좋지 않은 생각입니다. `finally` 블록은 오직 정리 작업을 위한 코드에만 사용해야 합니다.
+
+## 예시
+
+### 무조건적 catch 블록
+
+`catch` 블록을 사용하면 `try` 블록 내에서 어떤 예외가 발생하든 `catch` 블록이 실행됩니다. 예를 들어, 다음 코드에서 예외가 발생하면 제어 흐름이 `catch` 블록으로 전달됩니다.
+
+```js
+try {
+  throw "myException"; // generates an exception
+} catch (e) {
+  // statements to handle any exceptions
+  logMyErrors(e); // pass exception object to error handler
+}
+```
+
+`catch` 블록에서는 식별자(`e`와 같은)를 지정하여 예외 객체의 값을 캡처할 수 있습니다. 이 식별자가 참조하는 예외 객체의 값은 `catch` 블록의 {{Glossary("Scope", "범위")}} 내에서만 사용할 수 있습니다.
+
+### 조건적 catch 블록
+
+여러 개의 `try...catch` 블록과 `if...else if...else` 구문을 조합하면 "조건부 `catch` 블록"을 만들 수 있습니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
+
+```js
+try {
+  myroutine(); // may throw three types of exceptions
+} catch (e) {
+  if (e instanceof TypeError) {
+    // statements to handle TypeError exceptions
+  } else if (e instanceof RangeError) {
+    // statements to handle RangeError exceptions
+  } else if (e instanceof EvalError) {
+    // statements to handle EvalError exceptions
+  } else {
+    // statements to handle any unspecified exceptions
+    logMyErrors(e); // pass exception object to error handler
+  }
+}
+```
+
+조건부 `catch` 블록의 일반적인 사용 사례는 예상되는 일부 오류만 포착하고 억제한 후, 다른 경우에는 오류를 다시 던지는 것입니다.
+
+```js
+try {
+  myRoutine();
+} catch (e) {
+  if (e instanceof RangeError) {
+    // statements to handle this very common expected error
+  } else {
+    throw e; // re-throw the error unchanged
+  }
+}
+```
+
+이것은 Java와 같은 다른 프로그래밍 언어와 유사한 형태를 취할 수 있습니다.
+
+```java
+try {
+  myRoutine();
+} catch (RangeError e) {
+  // statements to handle this very common expected error
+}
+// Other errors are implicitly re-thrown
+```
+
+### 중첩 try 블록
+
+먼저, 다음과 같은 코드가 어떻게 되는지 살펴보겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "finally"
+// "outer" "oops"
+```
+
+이제 `catch` 블록을 추가하여 내부 `try` 블록에서 이미 예외를 포착한다면:
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+이제 오류를 다시 발생시키겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+```
+
+예외는 가장 가까운 `catch` 블록에서 한 번만 잡히게 되며, 다시 던져지지 않는 한 외부 `catch` 블록에서는 잡히지 않습니다. 물론 "내부" 블록(즉, `catch` 블록 내부)에서 새로운 예외가 발생한다면, "외부" 블록에서 해당 예외를 잡을 수 있습니다.
+
+### finally 블록에서의 반환하기
+
+만약 `finally` 블록에서 값을 반환하면, 해당 값이 전체 `try-catch-finally` 문의 반환 값이 됩니다. 이는 `try` 블록이나 `catch` 블록 내에 있는 `return` 문에 관계없이 적용됩니다. 이는 `catch` 블록 내에서 발생한 예외에도 포함합니다.
+
+```js
+(() => {
+  try {
+    try {
+      throw new Error("oops");
+    } catch (ex) {
+      console.error("inner", ex.message);
+      throw ex;
+    } finally {
+      console.log("finally");
+      return;
+    }
+  } catch (ex) {
+    console.error("outer", ex.message);
+  }
+})();
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+`finally` 블록에서 값을 반환했기 때문에 (이는 전체 `try-catch-finally` 문의 반환 값) 외부로 "oops"는 전파되지 않습니다. 이는 `catch` 블록에서 반환된 어떤 값에도 동일하게 적용됩니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 관련 항목
+
+- {{jsxref("Error")}}
+- {{jsxref("Statements/throw", "throw")}}

From b2312dbbe11c1be9a1111477fe0bb3e52df6d498 Mon Sep 17 00:00:00 2001
From: ICE0208 
Date: Mon, 30 Sep 2024 10:05:11 +0900
Subject: [PATCH 030/148] =?UTF-8?q?[ko]=20=EC=A3=BC=EC=84=9D=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=A0=9C=EA=B1=B0=20(#23851)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

주석에서 불필요한 부분 제거
---
 .../ko/web/javascript/reference/global_objects/weakset/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.md b/files/ko/web/javascript/reference/global_objects/weakset/index.md
index a12c11d5da6dca..02297c449b1228 100644
--- a/files/ko/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/ko/web/javascript/reference/global_objects/weakset/index.md
@@ -99,7 +99,7 @@ ws.has(foo); // true
 ws.has(bar); // true
 
 ws.delete(foo); // set에서 foo를 제거
-ws.has(foo); // false, foo 는 이미 제거has been removed
+ws.has(foo); // false, foo 는 이미 제거
 ws.has(bar); // true, bar 는 유지 됨
 ```
 

From 69feb2fc5a9ffc0dc78f7c565cc0855a36ef186b Mon Sep 17 00:00:00 2001
From: abing <1786107245@qq.com>
Date: Mon, 30 Sep 2024 09:10:22 +0800
Subject: [PATCH 031/148] zh-cn: update 'Sending forms through JavaScript'
 (#23756)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../sending_forms_through_javascript/index.md | 397 ++++--------------
 1 file changed, 71 insertions(+), 326 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 5c4e9fae05141e..d965effa6becb2 100644
--- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
@@ -2,380 +2,125 @@
 title: 使用 JavaScript 发送表单
 slug: Learn/Forms/Sending_forms_through_JavaScript
 l10n:
-  sourceCommit: 402d8cd44691881e55bf214a7c0cb02bcb817305
+  sourceCommit: 4414bc297a05373570250fe1fb154eab197f29ca
 ---
 
 {{LearnSidebar}}
 
-HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求（例如通过 `XMLHttpRequest`）。本文对这些方法进行了探讨。
+当用户提交 HTML 表单（如通过点击{{glossary("Submit_button", "提交按钮")}}）时，浏览器会发出 [HTTP](/zh-CN/docs/Web/HTTP) 请求，来发送表单中的数据。但是，web 应用有时会使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}），以编程方式将数据发送到期望提交表单的端点，而不是采用这种声明式方法。本文将解释为什么这是一个重要的用例，并说明如何实现它。
 
-## 表单不总是表单
+## 为什么使用 JavaScript 提交表单数据？
 
-在渐进式 Web 应用、单页应用和基于框架的应用中，通常会使用 [HTML 表单](/zh-CN/docs/Learn/Forms)来发送数据，而不会在收到响应数据时加载新文档。让我们先来谈谈为什么这需要一种不同的方法。
+根据文章[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)中的描述，标准 HTML 表单提交会加载发送数据的目标 URL，这意味着浏览器窗口将以加载整个页面的方式进行导航。
 
-### 获得整体界面的控制
+然而，许多 web 应用（特别是{{glossary("progressive web apps","渐进式 web 应用")}}和{{glossary("SPA","单页面应用")}}）都使用 JavaScript API 向服务器请求数据，并更新页面的相关部分，从而避免加载整个页面的开销。
 
-如前一篇文章所述，标准 HTML 表单提交会加载发送数据的 URL，这意味着浏览器窗口会以全页面加载的方式进行导航。避免全页面加载可以避免网络延迟和可能出现的视觉问题（如闪烁），从而提供更流畅的体验。
+因此，当这些 web 应用想要提交表单数据时，仅使用 HTML 表单来收集用户输入，而不提交数据。当用户尝试发送数据时，应用会接管控制权并使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}）来发送数据。
 
-许多现代用户界面只使用 HTML 表单来收集用户输入，而不是用于数据提交。当用户尝试发送数据时，应用程序会控制并在后台异步传输数据，只更新用户界面中需要更改的部分。
+## JavaScript 表单提交的问题
 
-### 表单提交和 AJAX 请求之间的区别？
+如果 Web 应用的服务器端点由开发人员控制，那么他们可以选择任意方式发送表单数据，例如以 JSON 对象的形式。
 
-{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构建 HTTP 请求、发送请求并获取结果。从历史上看，{{domxref("XMLHttpRequest")}} 是为获取和发送 [XML](/zh-CN/docs/Web/XML) 作为交换格式而设计的，后来这种格式被 [JSON](/zh-CN/docs/Glossary/JSON) 所取代。但是，XML 和 JSON 都不适合表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由键/值对的 URL 编码列表组成。为了传输二进制数据，HTTP 请求被重塑为 `multipart/form-data`。
+然而，如果服务器端点希望提交表单，web 应用就必须以特定方式对数据进行编码。例如，如果数据仅为文本，则可以由 URL 编码的键/值对列表组成，并以 `application/x-www-form-urlencoded` 的 {{httpheader("Content-Type")}} 发送。如果表单包含二进制数据，则必须使用 `multipart/form-data` 内容类型发送。
 
-> [!NOTE]
-> 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
+{{domxref("FormData")}} 接口以上述方式对数据进行编码，在本文的其余部分，我们将对 `FormData` 进行简要介绍。更多详情，请参阅[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)指南。
 
-如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。
+## 手动创建 `FormData` 对象
 
-但如果要使用第三方服务，就需要按照服务要求的格式发送数据。
+可以为要添加的每个字段调用其 {{domxref("FormData.append()", "append()")}} 方法（传入字段的名称和值），以此来填充 `FormData` 对象。对于文本字段，值可以是字符串；对于二进制字段（包括 {{domxref("File")}} 对象），值可以是 {{domxref("Blob")}}。
 
-那么我们应该如何发送这些数据呢？下面将介绍所需要的不同技术。
-
-## 发送表单数据
-
-一共有三种方式来发送表单数据：
-
-- 手工构建 `XMLHttpRequest`。
-- 使用独立的 `FormData` 对象。
-- 使用绑定到 `
    ` 元素的 `FormData`。
-
-让我们仔细看一下。
-
-### 手工构建 XMLHttpRequest
-
-{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过 URL 编码准备数据，并遵守表单数据请求的具体规定。
-
-让我们看个示例：
-
-```html
-
-```
-
-这是 JavaScript 代码部分：
-
-```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  console.log("Sending data");
-
-  const XHR = new XMLHttpRequest();
-
-  const urlEncodedDataPairs = [];
-
-  // 将数据对象转换为 URL 编码的键/值对数组。
-  for (const [name, value] of Object.entries(data)) {
-    urlEncodedDataPairs.push(
-      `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
-    );
-  }
-
-  // 将配对合并为单个字符串，并将所有 % 编码的空格替换为
-  // “+”字符；匹配浏览器表单提交的行为。
-  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
-
-  // 定义成功数据提交时发生的情况
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义错误提示
-  XHR.addEventListener("error", (event) => {
-    alert("哎呀！出问题了。");
-  });
-
-  // 建立我们的请求
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 为表单数据 POST 请求添加所需的 HTTP 头
-  XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-
-  // 最后，发送我们的数据。
-  XHR.send(urlEncodedData);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
-
-> [!NOTE]
-> 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
-
-### 使用 XMLHttpRequest 和 FormData 对象
-
-手动建立一个 HTTP 请求非常困难。幸运的是，[XMLHttpRequest 规范](https://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法——利用 {{domxref("FormData","FormData")}} 对象来处理表单数据请求。
-
-{{domxref("FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。
-
-该对象的使用详见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)，下面是两个示例：
-
-#### 使用一个独立的 FormData 对象
-
-```html
-
-```
-
-你应该会觉得那个 HTML 示例很熟悉，现在来展示 JavaScript 代码：
+在下面的示例中，当用户点击按钮时，将以表单提交的形式发送数据：
 
 ```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  const XHR = new XMLHttpRequest();
-  const FD = new FormData();
-
-  // 把我们的数据添加到这个 FormData 对象中
-  for (const [name, value] of Object.entries(data)) {
-    FD.append(name, value);
+async function sendData(data) {
+  // 构建一个 FormData 实例
+  const formData = new FormData();
+
+  // 添加一个文本字段
+  formData.append("name", "Pomegranate");
+
+  // 添加一个文件
+  const selection = await window.showOpenFilePicker();
+  if (selection.length > 0) {
+    const file = await selection[0].getFile();
+    formData.append("file", file);
   }
 
-  // 定义数据成功发送并返回后执行的操作
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义发生错误时执行的操作
-  XHR.addEventListener("error", (event) => {
-    alert("Oops! 出错了。");
-  });
-
-  // 设置请求地址和方法
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 发送这个 formData 对象，HTTP 请求头会自动设置
-  XHR.send(FD);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用一个独立的_FormData_对象", "100%", 50)}}
-
-#### 使用绑定到表单元素上的 FormData
-
-你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个 `FormData` 对象，表示表单中包含的数据。
-
-这段 HTML 是典型的情况：
-
-```html
-
-  
-  
-  
-
    
-```
-
-但是 JavaScript 接管了这个表单：
-
-```js
-window.addEventListener("load", () => {
-  function sendData() {
-    const XHR = new XMLHttpRequest();
-
-    // 我们把这个 FormData 和表单元素绑定在一起。
-    const FD = new FormData(form);
-
-    // 我们定义了数据成功发送时会发生的事件
-    XHR.addEventListener("load", (event) => {
-      alert(event.target.responseText);
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 我们定义了失败的情形下会发生的事件
-    XHR.addEventListener("error", (event) => {
-      alert("哎呀！出了一些问题。");
-    });
-
-    // 我们设置了我们的请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 发送的数据是由用户在表单中提供的
-    XHR.send(FD);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("myForm");
-
-  // 接管表单的 submit 事件
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-
-    sendData();
-  });
-});
+const send = document.querySelector("#send");
+send.addEventListener("click", sendData);
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}
-
-你甚至可以通过使用表单的 {{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理它们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。
-
-## 处理二进制数据
+1. 首先，构建一个新的、空的 `FormData` 对象。
+2. 接下来，调用 `append()` 两次，向 `FormData` 对象添加两个项目：一个文本字段和一个文件。
+3. 最后，我们使用 `fetch()` API 发出 {{httpmethod("POST")}} 请求，并将 `FormData` 对象设置为请求体。
 
-如果你使用一个含有 `` 组件的 {{domxref("FormData","FormData")}} 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
+请注意，不必设置 {{httpheader("Content-Type")}} 标头：当将 `FormData` 对象传入 `fetch()` 时，会自动设置正确的标头。
 
-在现代网络上，二进制数据有很多来源：例如 {{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、[WebRTC](/zh-CN/docs/Web/API/Navigator/getUserMedia)，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参见[如何在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)。
+## 关联 `FormData` 对象和 `
    `
 
-发送二进制数据最简单的方法是使用 {{domxref("FormData", "FormData")}} 的 `append()` 方法，如上图所示。如果必须手工操作，就比较麻烦了。
+如果提交的数据来自 {{htmlelement("form")}}，则可以通过将表单传入 `FormData` 构造函数来填充 `FormData` 实例。
 
-在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多部分表单数据请求：
+假设我们的 HTML 声明了一个 `` 元素：
 
 ```html
-
+
   
    
-    
-    
+    
+    
   
    
   
    
-    
-    
+    
+    
   
    
-  
+  
 
    
 ```
 
-如你所见，这个 HTML 只是一个标准的 `
    `，没有什么神奇的事情。“魔法”都在 JavaScript 里：
+表单包含一个文本输入、一个文件输入和一个提交按钮。
+
+JavaScript 如下：
 
 ```js
-// 因为我们想获取 DOM 节点，
-// 我们在页面加载时初始化我们的脚本。
-window.addEventListener("load", () => {
-  // 这些变量用于存储表单数据
-  const text = document.getElementById("theText");
-  const file = {
-    dom: document.getElementById("theFile"),
-    binary: null,
-  };
-
-  // 使用 FileReader API 获取文件内容
-  const reader = new FileReader();
-
-  // 因为 FileReader 是异步的，会在完成读取文件时存储结果
-  reader.addEventListener("load", () => {
-    file.binary = reader.result;
-  });
-
-  // 页面加载时，如果一个文件已经被选择，那么读取该文件。
-  if (file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
+const form = document.querySelector("#userinfo");
 
-  // 如果没有被选择，一旦用户选择了它，就读取文件。
-  file.dom.addEventListener("change", () => {
-    if (reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // 发送数据是我们需要的主要功能
-  function sendData() {
-    // 如果存在被选择的文件，等待它读取完成
-    // 如果没有，延迟函数的执行
-    if (!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // 要构建我们的多部分表单数据请求，
-    // 我们需要一个 XMLHttpRequest 实例
-    const XHR = new XMLHttpRequest();
-
-    // 我们需要一个分隔符来定义请求的每一部分。
-    const boundary = "blob";
-
-    // 将我们的主体请求存储于一个字符串中
-    let data = "";
-
-    // 所以，如果用户已经选择了一个文件
-    if (file.dom.files[0]) {
-      // 在请求体中开始新的一部分
-      data += `--${boundary}\r\n`;
-
-      // 把它描述成表单数据
-      data +=
-        "content-disposition: form-data; " +
-        // 定义表单数据的名称
-        `name="${file.dom.name}"; ` +
-        // 提供文件的真实名字
-        `filename="${file.dom.files[0].name}"\r\n`;
-      // 和文件的 MIME 类型
-      data += `Content-Type: ${file.dom.files[0].type}\r\n`;
-
-      // 元数据和数据之间有一条空行。
-      data += "\r\n";
-
-      // 将二进制数据添加到主体请求中
-      data += file.binary + "\r\n";
-    }
-
-    // 文本数据更简单一些
-    // 在主体请求中开始一个新的部分
-    data += `--${boundary}\r\n`;
-
-    // 假设这是表单数据，并命名它
-    data += `content-disposition: form-data; name="${text.name}"\r\n`;
-    // 元数据和数据之间有一条空行。
-    data += "\r\n";
-
-    // 添加文本数据到主体请求中
-    data += text.value + "\r\n";
-
-    // 一旦完成，“关闭”主体请求
-    data += `--${boundary}--`;
-
-    // 定义成功提交数据执行的语句
-    XHR.addEventListener("load", (event) => {
-      alert("耶！已发送数据并加载响应。");
-    });
+async function sendData() {
+  // 将 FormData 对象与表单元素关联起来
+  const formData = new FormData(form);
 
-    // 定义发生错误时做的事
-    XHR.addEventListener("error", function (event) {
-      alert("哎呀！出现了一些问题。");
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 建立请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求
-    XHR.setRequestHeader(
-      "Content-Type",
-      `multipart/form-data; boundary=${boundary}`,
-    );
-
-    // 最后，发送数据。
-    XHR.send(data);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("theForm");
-
-  // 添加 submit 事件处理器
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    sendData();
-  });
+// 接管表单提交
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  sendData();
 });
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("处理二进制数据", "100%", 150)}}
-
-## 总结
+为表单元素添加了一个提交事件处理程序。首先调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 阻止浏览器内置的表单提交，这样我们就可以接手了。然后，调用 `sendData()` 来获取表单元素并将其传递给 `FormData` 构造函数。
 
-取决于不同的浏览器和正在处理数据的类型，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫地在旧浏览器上通过 [polyfill](https://github.com/jimmywarting/FormData) 使用它：
+之后，我们使用 `fetch()` 以 HTTP `POST` 请求的形式发送 `FormData` 实例。
 
 ## 参见
 

From 37fa3d8a8e0f3c85483638e5ee81b0d0fdc3c1ca Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Mon, 30 Sep 2024 09:15:45 +0800
Subject: [PATCH 032/148] [zh-cn]: sync translation for Permissions API
 (#23487)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/web/api/permissions/index.md      |  6 +-
 .../zh-cn/web/api/permissions/query/index.md  | 27 ++++----
 .../zh-cn/web/api/permissions/revoke/index.md | 31 +++++----
 files/zh-cn/web/api/permissions_api/index.md  | 48 ++++++++++----
 .../using_the_permissions_api/index.md        | 66 +++++--------------
 .../api/workernavigator/permissions/index.md  |  4 +-
 6 files changed, 86 insertions(+), 96 deletions(-)

diff --git a/files/zh-cn/web/api/permissions/index.md b/files/zh-cn/web/api/permissions/index.md
index a277033bdb522b..684cb7e671be3f 100644
--- a/files/zh-cn/web/api/permissions/index.md
+++ b/files/zh-cn/web/api/permissions/index.md
@@ -2,7 +2,7 @@
 title: Permissions
 slug: Web/API/Permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 805d398f95c9d1ad8769e65d56bbfe2a31205021
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
@@ -13,10 +13,6 @@ l10n:
 
 - {{domxref("Permissions.query","Permissions.query()")}}
   - : 返回给定 API 的用户权限状态。
-- {{domxref("Permissions.request","Permissions.request()")}} {{Experimental_Inline}}
-  - : 请求使用给定 API 的权限。目前任何浏览器都不支持此功能。
-- {{domxref("Permissions.requestAll","Permissions.requestAll()")}} {{Experimental_Inline}} {{Non-standard_Inline}}
-  - : 请求使用一组给定 API 的权限。目前任何浏览器都不支持此功能。
 - {{domxref("Permissions.revoke","Permissions.revoke()")}} {{Deprecated_Inline}}
   - : 撤消当前在给定 API 上设置的权限。
 
diff --git a/files/zh-cn/web/api/permissions/query/index.md b/files/zh-cn/web/api/permissions/query/index.md
index 81d68ff3f7f150..f062e813d1b3ba 100644
--- a/files/zh-cn/web/api/permissions/query/index.md
+++ b/files/zh-cn/web/api/permissions/query/index.md
@@ -2,13 +2,17 @@
 title: Permissions：query() 方法
 slug: Web/API/Permissions/query
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
 
 {{domxref("Permissions")}} 接口的 **`query()`** 方法会返回全局作用域中用户权限的状态。
 
+用户权限名称在每个功能的各自规范中定义。不同浏览器版本支持的权限在 [`Permissions` 接口的兼容性数据](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)中列出（另请参阅 [Firefox 值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)和 [WebKit 值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)的相关源代码）。
+
+每个权限所控制的 API 在[权限 API](/zh-CN/docs/Web/API/Permissions_API) 概述主题中的[权限相关的 API](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api) 中列出。
+
 ## 语法
 
 ```js-nolint
@@ -19,23 +23,24 @@ query(permissionDescriptor)
 
 - `permissionDescriptor`
 
-  - : 一个为 `query` 操作设置选项的对象，由一个以逗号分隔的键——值对列表组成。可用的选项有：
+  - : 设置 `query` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
 
     - `name`
-      - : 要查询权限的 API 名称。每个浏览器支持不同的值集。Firefox 的值在[这里](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)，Chromium 的值在[这里](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)，WebKit 的值在[这里](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅推送，不被 Firefox 所支持——请参阅下面的“浏览器兼容性”部分）表示是否希望为每条消息显示通知或发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专有信息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串，例如 `camera`、`bluetooth`、`camera`、`geolocation`（有关更完整的列表，请参阅 [`Permissions`](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)）。如果浏览器不支持权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage`权限允许根据 [Storage API](https://storage.spec.whatwg.org/) 使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）来进行存储。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个会兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
+一个兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions/revoke/index.md b/files/zh-cn/web/api/permissions/revoke/index.md
index 6535c7d1742d59..f2b72976e1b1bb 100644
--- a/files/zh-cn/web/api/permissions/revoke/index.md
+++ b/files/zh-cn/web/api/permissions/revoke/index.md
@@ -2,38 +2,43 @@
 title: Permissions：revoke() 方法
 slug: Web/API/Permissions/revoke
 l10n:
-  sourceCommit: afdbe078d7c0357430ff360538edafba3af5496d
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}{{deprecated_header}}
 
 {{domxref("Permissions")}} 接口的 **`revoke()`** 方法可将当前设置的权限还原为默认状态，即通常的 `prompt` 状态。该方法在全局 {{domxref("Permissions")}} 对象 {{domxref("navigator.permissions")}} 上调用。
 
+此方法已从主要权限 API 规范中删除，因为其用例不明确。权限由浏览器管理，当前权限模型不涉及网站开发人员能够强制请求或撤销权限。浏览器已以首选项形式提供此 API，但它不太可能达到标准轨道。有关更多上下文，请参阅[删除 `permissions.revoke()` 的原始讨论](https://github.com/w3c/permissions/issues/46)。
+
 ## 语法
 
 ```js-nolint
-revoke(descriptor)
+revoke(permissionDescriptor)
 ```
 
 ### 参数
 
-- `descriptor`
-  - : 一个基于 `PermissionDescriptor` 字典的对象，用于设置由逗号分隔的键——值对列表组成的操作选项。可用的选项有：
+- `permissionDescriptor`
+
+  - : 设置 `revoke` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
+
     - `name`
-      - : 要查询其权限的 API 的名称。每个浏览器支持不同的值集。你可以查阅 [Firefox 的值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 的值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)、[WebKit 的值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅限推送，Firefox 不支持——请参阅下面的[浏览器兼容性](#浏览器兼容性)部分）表示是否要为每条信息显示通知，还是能够发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专用消息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串。如果浏览器不支持该权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage` 权限允许使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）进行存储，如 [Storage API](https://storage.spec.whatwg.org/) 所述。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个 {{jsxref("Promise")}}，其会在调用兑现处理器时传入指示请求的结果的 {{domxref("PermissionStatus")}} 对象。
+使用 {{domxref("PermissionStatus")}} 对象调用其兑现处理器以指示请求的结果的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions_api/index.md b/files/zh-cn/web/api/permissions_api/index.md
index f053a1393550d3..a922709ebb0489 100644
--- a/files/zh-cn/web/api/permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/index.md
@@ -2,29 +2,48 @@
 title: 权限 API
 slug: Web/API/Permissions_API
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}{{AvailableInWorkers}}
 
-**权限 API**（Permissions API）提供一致的编程方式来查询归因于当前上下文的 API 权限的状态。例如，权限 API 可用于确定是否已授予或拒绝访问特定 API 的权限，或者是否需要特定的用户权限。
-
-请注意，此 API 的权限有效地聚合了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求，[Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 应用于文档的限制以及用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将被“拒绝”，并且不会提示用户访问。
+**权限 API** 提供了一种一致的编程方式来查询当前上下文（例如网页或 worker）的 API 权限状态。例如，它可用于确定访问特定功能或 API 的权限是否已被授予、被拒绝或需要特定用户权限。
 
 ## 概念和用法
 
-历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致且更好的用户体验。
+历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致的用户体验。
+
+此 API 的权限有效地汇总了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求、应用于文档的 [Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 限制、用户交互要求和用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将会为 `denied`，并且不会提示用户访问。
+
+`permissions` 属性已在 {{domxref("Navigator")}} 对象上可用，在标准浏览上下文和 worker 上下文中均可用（{{domxref("WorkerNavigator")}}——因此可在 worker 内进行权限检查），并返回 {{domxref("Permissions")}} 对象，该对象提供对权限 API 功能的访问。
+
+一旦你有了这个对象，你就可以使用 {{domxref("Permissions.query()")}} 方法返回一个通过 {{domxref("PermissionStatus")}} 兑现特定 API 的 promise。
+
+### 请求权限
+
+如果权限状态为 `prompt`，则用户必须确认提示以授予对该特性的访问权限。
+
+触发此提示的机制将取决于特定 API——它未定义为权限 API 的一部分。通常，触发器是调用方法来访问或打开该特性的代码，或者注册随后将访问该特性的通知的代码。
+
+请注意，并非所有功能都需要提示。权限可能由 `Permission Policy` 授予，由{{glossary("transient activation", "瞬态激活")}}隐式授予，或通过其他机制授予。
+
+### 撤销权限
 
-`permissions` 属性已在标准浏览上下文和 worker 上下文（{{domxref("WorkerNavigator")}} ——因此可以在 worker 内部进行权限检查）中的 {{domxref("Navigator")}} 对象上可用，并返回一个提供对权限 API 功能的访问的 {{domxref("Permissions")}} 对象。
+权限撤销不由 API 管理。更具体地说，{{domxref("Permissions.revoke()")}} 方法曾被提出，但此后已从实施该方法的浏览器中删除。
 
-获得此对象后，你可以使用 {{domxref("Permissions.query()")}} 方法返回一个 promise，该 promise 为特定的 API 解析 {{domxref("PermissionStatus")}} 对象。请注意，如果状态为 `prompt`，则用户必须在访问该功能之前确认提示，并且启动此提示的机制将取决于特定的 API——它并未定义为权限 API 的一部分。
+用户可以使用浏览器设置手动删除特定网站的权限：
+
+- **Firefox**：_菜单 > 设置 > 隐私和安全 > 权限_（然后选择感兴趣的权限的**设置**按钮）。
+- **Chrome**：_菜单 > 设置 > 显示高级设置_。在*隐私*部分中，单击*内容设置*。在出现的对话框中，找到*位置*部分并选择*当网站尝试... 时询问*。最后，单击*管理例外*并删除你授予你感兴趣的网站的权限。
 
 ### 权限相关的 API
 
 并非所有 API 的权限状态都可以通过权限 API 查询。权限相关的 API 的非详尽列表包括：
 
 - [Background Synchronization API](/zh-CN/docs/Web/API/Background_Synchronization_API)：`background-sync`（应当总是被授予）
-- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API)：`geolocation`
+- [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API#安全考虑)：`clipboard-read`、`clipboard-write`
+- [Compute Pressure API](/zh-CN/docs/Web/API/Compute_Pressure_API)：`compute-pressure`
+- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API#security_considerations)：`geolocation`
 - [Local Font Access API](/zh-CN/docs/Web/API/Local_Font_Access_API)：`local-fonts`
 - [Media Capture and Streams API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)：`microphone`、`camera`
 - [Notifications API](/zh-CN/docs/Web/API/Notifications_API)：`notifications`
@@ -34,15 +53,10 @@ l10n:
 - [Sensor APIs](/zh-CN/docs/Web/API/Sensor_APIs)：`accelerometer`、`gyroscope`、`magnetometer`、`ambient-light-sensor`
 - [Storage Access API](/zh-CN/docs/Web/API/Storage_Access_API)：`storage-access`、`top-level-storage-access`
 - [Storage API](/zh-CN/docs/Web/API/Storage_API)：`persistent-storage`
+- [Web Bluetooth API](/zh-CN/docs/Web/API/Web_Bluetooth_API)：`bluetooth`
 - [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)：`midi`
 - [Window Management API](/zh-CN/docs/Web/API/Window_Management_API)：`window-management`
 
-## 示例
-
-我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。
-
-有关其工作原理的更多信息，请阅读我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)。
-
 ## 接口
 
 - {{domxref("Permissions")}}
@@ -55,6 +69,12 @@ l10n:
 - {{domxref("Navigator.permissions")}} 和 {{domxref("WorkerNavigator.permissions")}} {{ReadOnlyInline}}
   - : 分别用于访问主上下文和 worker 上下文的 {{domxref("Permissions")}} 对象。
 
+## 示例
+
+我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)、[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)，或者在我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)中阅读有关其工作原理的更多信息。
+
+[`Permissions.query()` 示例](/zh-CN/docs/Web/API/Permissions/query#测试对不同权限的支持)也展示了在当前浏览器上测试大多数权限并记录结果的代码。
+
 ## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
index 276fbb9d77a124..2cc53eec70f687 100644
--- a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
@@ -1,27 +1,25 @@
 ---
-title: 使用 Permissions API
+title: 使用权限 API
 slug: Web/API/Permissions_API/Using_the_Permissions_API
 l10n:
-  sourceCommit: 3dbfd299e6f34873d6355bae4b12b5c1c69242f1
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}
 
-本文提供了使用 W3C [Permissions API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
+本文提供了使用[权限 API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
 
 ## 申请权限面临的困境
 
-惨淡的事实是，权限在 Web 开发中是令人厌恶却不得不面对的问题，对于开发者而言，处理它毫无乐趣。
+Web 上的权限是令人厌恶却不得不面对的问题，但对于开发人员来说，处理它们并不是一件有趣的事。
 
 由于历史原因，不同的 API 使用各自不同的方式来处理自己的权限──例如，[Notification API](/zh-CN/docs/Web/API/Notifications_API) 允许显式地检查权限状态和申请权限，然而，[Geolocation API](/zh-CN/docs/Web/API/Geolocation_API) 却不能。
 
-[Permissions API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
+[权限 API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
 
-许多 API 现在都能进行权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)
+许多 API 现已启用权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)、[Push API](/zh-CN/docs/Web/API/Push_API) 和 [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api)中提供了许多权限启用的 API 列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器支持情况。
 
-- [Push API](/zh-CN/docs/Web/API/Push_API)、[Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#permission-aware_apis)中提供了许多启用权限的 API 的列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器的支持情况。
-
-{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准及不被广泛支持）。
+{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准且不被广泛支持）。
 
 ## 一个简单的例子
 
@@ -29,22 +27,22 @@ l10n:
 
 ![英国格林菲尔德地图的截图](location-finder-with-permissions-api.png)
 
-你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和 Permissions API 有关的代码，如果你想学习其他部分，请自行阅读。
+你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和权限 API 有关的代码，如果你想学习其他部分，请自行阅读。
 
-### 访问 Permissions API
+### 访问权限 API
 
-浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和重置权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}; 我们接下来会讨论它。
+浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和撤销权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}；我们接下来会讨论它。
 
 ### 查询权限状态
 
-在我们的例子中，权限功能使用一个函数来处理— `handlePermission()`. 它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise resolve 后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
+在我们的例子中，权限功能使用一个函数来处理——`handlePermission()`。它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise 兑现后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
 
 - `"granted"`
-  - : "Enable Geolocation" 按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
+  - : “Enable Geolocation”按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
 - `"prompt"`
-  - : 隐藏 "Enable Geolocation" 按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让 "Enable Geolocation" 按钮显示出来）。
+  - : 隐藏“Enable Geolocation”按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让“Enable Geolocation”按钮显示出来）。
 - `"denied"`
-  - : "Enable Geolocation" 按钮会被显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
+  - : “Enable Geolocation”按钮会显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
 
 ```js
 function handlePermission() {
@@ -79,42 +77,8 @@ handlePermission();
 
 ### 权限描述符
 
-{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数 — 它包含你感兴趣的 API 的名称。一些 API 有继承自默认的 `PermissionDescriptor` 的更加复杂的 `PermissionDescriptor`s 以包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个比尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#Parameters) 是 `true` 还是 `false`.
-
-### 重置权限
-
-从 Firefox 47 开始，你可以使用 {{domxref("Permissions.revoke()")}} 方法重置现有权限。它的调用方式和 {{domxref("Permissions.query()")}} 方法几乎一模一样，区别是，当 promise 成功 resolve 时，它会让一个现有的权限恢复默认状态（通常是 `prompt`）。让我们看看 demo 中的代码：
-
-```js
-const revokeBtn = document.querySelector(".revoke");
-
-// ...
-
-revokeBtn.onclick = () => {
-  revokePermission();
-};
-
-// ...
-
-function revokePermission() {
-  navigator.permissions.revoke({ name: "geolocation" }).then((result) => {
-    report(result.state);
-  });
-}
-```
-
-> [!NOTE]
-> 自 Firefox 51 开始 `revoke()` 函数被默认关闭了，因为它的设计带来了 [Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) 中提到的问题。可以通过将设置项 `dom.permissions.revoke.enable` 置为 `true` 来重新开启它。
+{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数——它包含你感兴趣的 API 的名称。一些 API 有更复杂的 `PermissionDescriptor` 结构，该结构继承自默认的 `PermissionDescriptor`，包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个布尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#参数) 是 `true` 还是 `false`。
 
 ### 响应权限状态变化
 
 你会注意到，在上面的代码中，在 {{domxref("PermissionStatus")}} 对象上有一个 `onchange` 事件回调——这让我们可以对感兴趣的 API 的状态变化做出响应。目前，我们只是上报了状态的变化。
-
-## 总结和展望未来
-
-目前，较之我们已有的，这个 API 并没有提供太多额外内容。如果在浏览器询问时，我们选择了从不分享我们的位置，那么不使用浏览器菜单选项的话，我们将无法返回权限的初始状态（询问）：
-
-- **Firefox**：_工具 > 页面信息 > 权限 > 访问你的位置_。选择“总是询问”。
-- **Chrome**：_汉堡菜单 > 设置 > 显示高级设置。在隐私部分，点击“内容设置”。在出现的对话框中，找到“位置”部分，选择“当网站试图访问时询问”...最后，点击“管理特例”_，移除你对特定网站的授权。
-
-但是，未来浏览器会提供 `request()` 方法，他让我们可以在任何时候以编程的方式来请求权限。这非常值得期待尽快被实现。
diff --git a/files/zh-cn/web/api/workernavigator/permissions/index.md b/files/zh-cn/web/api/workernavigator/permissions/index.md
index 619af770994cb1..3d504d2b557941 100644
--- a/files/zh-cn/web/api/workernavigator/permissions/index.md
+++ b/files/zh-cn/web/api/workernavigator/permissions/index.md
@@ -2,10 +2,10 @@
 title: WorkerNavigator：permissions 属性
 slug: Web/API/WorkerNavigator/permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: e8fe043f7d2ad7cd9804d1bf96e0310949f1dac7
 ---
 
-{{APIRef("Permissions API")}}
+{{APIRef("Permissions API")}}{{AvailableInWorkers("worker")}}
 
 {{domxref("WorkerNavigator")}} 接口的 **`permissions`** 只读属性返回一个 {{domxref("Permissions")}} 对象，可以用于查询或更新 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 涵盖的 API 权限状态。
 

From aacc5a1087fe1bddf387f5dec8954aba3c5ce7c9 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Mon, 30 Sep 2024 09:16:46 +0800
Subject: [PATCH 033/148] zh-CN: create `extension` (#23533)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../webextensions/api/extension/index.md      | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md

diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
new file mode 100644
index 00000000000000..a7c39bd392a4e4
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
@@ -0,0 +1,89 @@
+---
+title: extension
+slug: Mozilla/Add-ons/WebExtensions/API/extension
+l10n:
+  sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+有关插件的工具；获取你的插件的资源包的 URL；获取你的插件页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象；获取各种设置的值。
+
+> **备注：** **该模块中的消息 API 被弃用**，取而代之的是 [`runtime`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime) 模块中相应的 API。
+
+## 类型
+
+- {{WebExtAPIRef("extension.ViewType")}}
+  - : 用于指定要获取的视图类型的字符串。
+
+## 属性
+
+- {{WebExtAPIRef("extension.lastError")}} {{deprecated_inline}}
+  - : 如果异步扩展 API 中出现错误，将在回调的调用中将该属性设置为那一错误。若没有发生错误，`lastError` 将为 {{jsxref("undefined")}}。
+- {{WebExtAPIRef("extension.inIncognitoContext")}}
+  - : 对在隐身模式标签中运行的内容脚本、在隐身模式进程中运行的扩展页面返回 `true`。（仅适用于 `incognito_behavior` 取值为“`split`”的扩展。）
+
+## 函数
+
+- {{WebExtAPIRef("extension.getBackgroundPage()")}}
+  - : 返回当前扩展内运行的后台页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象。如果扩展不存在后台页面，则返回 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
+- {{WebExtAPIRef("extension.getExtensionTabs()")}} {{deprecated_inline}}
+  - : 返回当前扩展内运行的每个标签的 JavaScript [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.getURL()")}} {{deprecated_inline}}
+  - : 将扩展安装目录内的相对路径转换为完全限定的 URL。
+- {{WebExtAPIRef("extension.getViews()")}}
+  - : 返回当前扩展内运行的每个页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.isAllowedIncognitoAccess()")}}
+  - : 获取扩展对隐身模式的访问权限的状态（由用户控制的“_允许在隐身模式中_”复选框确定）。
+- {{WebExtAPIRef("extension.isAllowedFileSchemeAccess()")}}
+  - : 获取扩展对 `file://` 协议的访问权限的状态（由用户控制的“_允许访问文件 URL_”复选框确定）。
+- {{WebExtAPIRef("extension.sendRequest()")}} {{deprecated_inline}}
+  - : 发送单一请求到扩展中的其他监听器。
+- {{WebExtAPIRef("extension.setUpdateUrlData()")}}
+  - : 设置扩展的更新 URL 中使用的 ap CGI 参数的值。对于托管在浏览器供应商商店中的扩展，此值将被忽略。
+
+## 事件
+
+- {{WebExtAPIRef("extension.onRequest")}} {{deprecated_inline}}
+  - : 当从扩展进程或内容脚本发送请求时触发。
+- {{WebExtAPIRef("extension.onRequestExternal")}} {{deprecated_inline}}
+  - : 当从另一个扩展发送请求时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.com/docs/extensions/reference/api/extension/) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+
+

From 7613a02130dd43b2c0b975a0672f747ac360ece0 Mon Sep 17 00:00:00 2001
From: Gahotx <53534938+Gahotx@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:21:29 +0800
Subject: [PATCH 034/148] [zh-cn]: update the translation of the SVG attribute
 `attributeName` (#23781)

---
 .../web/svg/attribute/attributename/index.md  | 69 +++++++++++++------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index 2685709224bb11..1aeb222088b400 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -1,47 +1,72 @@
 ---
 title: attributeName
 slug: Web/SVG/Attribute/attributeName
+l10n:
+  sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0
 ---
 
 {{SVGRef}}
 
-该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
+**`attributeName`** 属性表示动画期间将要更改的目标元素的 CSS 属性或属性的名称。
 
-## 使用说明
+你可以将此属性与以下 SVG 元素一起使用：
 
-| 类别     | 动画属性目标属性                                                                      |
-| -------- | ------------------------------------------------------------------------------------- |
-| 值       | \                                                                      |
-| 可变性   | No                                                                                    |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
+- {{SVGElement("animate")}}
+- {{SVGElement("animateTransform")}}
+- {{SVGElement("set")}}
 
 ## 示例
 
-下面的示例使用了 y 作为`attributeName`，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-```xml
-
-
+```html
+
   
-    
+      from="0"
+      to="50"
+      dur="5s"
+      repeatCount="indefinite" />
   
 
 ```
 
-## 元素
+{{EmbedLiveSample("示例", "400", "250")}}
+
+## 使用说明
 
-下列元素可以使用`attributeName`属性：
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
    值<name>
    默认值None
    动画性无
    
 
-- {{ SVGElement("animate") }}
-- {{ SVGElement("animateColor") }}
-- {{ SVGElement("animateTransform") }}
-- {{ SVGElement("set") }}
+- ``
+  - ：此值表示要动画化的目标元素的 CSS 属性或属性的名称。
 
 ## 规范
 
 {{Specifications}}
+
+## 参见
+
+- [SMIL 动画规范](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute)

From 614e444674dc4cd136ac6e0fdcfbb186514914e5 Mon Sep 17 00:00:00 2001
From: Gahotx <53534938+Gahotx@users.noreply.github.com>
Date: Mon, 30 Sep 2024 11:08:20 +0800
Subject: [PATCH 035/148] [zh-cn]: create the translation of the SVG attribute
 `amplitude` (#23780)

Co-authored-by: A1lo 
---
 .../web/svg/attribute/amplitude/index.md      | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 files/zh-cn/web/svg/attribute/amplitude/index.md

diff --git a/files/zh-cn/web/svg/attribute/amplitude/index.md b/files/zh-cn/web/svg/attribute/amplitude/index.md
new file mode 100644
index 00000000000000..8b0ee8aac60da2
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/amplitude/index.md
@@ -0,0 +1,44 @@
+---
+title: amplitude
+slug: Web/SVG/Attribute/amplitude
+l10n:
+  sourceCommit: c2274293475b0a5b4febf85a49c1f91bf43ebac7
+---
+
+{{SVGRef}}
+
+**`amplitude`** 属性用于在 {{SVGAttr("type")}} 属性为 `gamma` 时，控制组件转换元素的伽马函数的幅值。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- {{SVGElement("feFuncR")}}
+
+## 使用说明
+
+
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
+
    值<number>
    默认值1
    动画性有
    
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{SVGElement("feComponentTransfer")}}

From 2cc0603cd67eefd96192b599a1de5a0cbb6034dc Mon Sep 17 00:00:00 2001
From: typenoob <61347081+typenoob@users.noreply.github.com>
Date: Mon, 30 Sep 2024 15:15:18 +0800
Subject: [PATCH 036/148] zh-cn: correct the example in CSS `@layer` (#23826)

Co-authored-by: A1lo 
---
 files/zh-cn/web/css/@layer/index.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 798d97bcf8b2bd..e5687bea35c727 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -141,9 +141,10 @@ p {
 
 ```html
 
    
-  I am displayed in color: rebeccapurple because the
-  type layer comes after the base layer. My green
-  border, font-size, and padding come from the base layer.
+  我以 color: rebeccapurple 的样式显示，因为
+  special 层定义在 base
+  层之后。我的绿色边框、font-size 和内边距来自于
+  base 层。
 
    
 ```
 

From 5f30e15ad40cd95576235d8357ac096675859058 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:53:48 +0800
Subject: [PATCH 037/148] [zh-CN]: add translation for Using the Document
 Picture-in-Picture API (#23740)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../using/index.md                            | 230 ++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 files/zh-cn/web/api/document_picture-in-picture_api/using/index.md

diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
new file mode 100644
index 00000000000000..7408b10474b270
--- /dev/null
+++ b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
@@ -0,0 +1,230 @@
+---
+title: 使用 Document Picture-in-Picture API
+slug: Web/API/Document_Picture-in-Picture_API/Using
+l10n:
+  sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}}
+
+本指南提供了 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 典型用法的详细指导。
+
+> [!NOTE]
+> 你可以在 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)中看到特性演示（另请参阅完整的[源代码](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture)）。
+
+## 示例 HTML
+
+以下 HTML 设置了一个基本的视频播放器。
+
+```html
+
    
+  
    视频播放器当前位于单独的画中画窗口中。
    
+  
    
+    
+
+    
+
+    
    
+      
    
+        Document Picture-in-Picture API 不可用
+      
    
+
+      
    
+    
    
+  
    
+
    
+```
+
+## 特性检测
+
+要检查是否支持 Document Picture-in-Picture API，你可以测试 `window` 上的 `documentPictureInPicture` 属性是否可用：
+
+```js
+if ("documentPictureInPicture" in window) {
+  document.querySelector(".no-picture-in-picture").remove();
+
+  const togglePipButton = document.createElement("button");
+  togglePipButton.textContent = "切换画中画";
+  togglePipButton.addEventListener("click", togglePictureInPicture, false);
+
+  document.getElementById("controlbar").appendChild(togglePipButton);
+}
+```
+
+如果可用，我们将删除“Document Picture-in-Picture API 不可用”消息，并添加 {{htmlelement("button")}} 元素以在文档画中画窗口中打开视频播放器。
+
+## 打开画中画窗口
+
+以下 JavaScript 调用 {{domxref("DocumentPictureInPicture.requestWindow", "window.documentPictureInPicture.requestWindow()")}} 打开一个空白的画中画窗口。返回的 {{jsxref("Promise")}} 兑现画中画 {{domxref("Window")}} 对象。使用 {{domxref("Element.append()")}} 将视频播放器移动到该窗口，然后我们显示消息通知用户它已被移动。
+
+`requestWindow()` 的 `width` 和 `height` 选项将画中画窗口设置为所需大小。如果选项值太大或太小而无法适应用户友好的窗口大小，浏览器可能会限制选项值。
+
+```js
+async function togglePictureInPicture() {
+  // 如果已经打开画中画窗口，则提前返回
+  if (window.documentPictureInPicture.window) {
+    return;
+  }
+
+  // 打开画中画窗口。
+  const pipWindow = await window.documentPictureInPicture.requestWindow({
+    width: videoPlayer.clientWidth,
+    height: videoPlayer.clientHeight,
+  });
+
+  // ...
+
+  // 将播放器移至画中画窗口。
+  pipWindow.document.body.append(videoPlayer);
+
+  // 显示一条消息表明它已被移动
+  inPipMessage.style.display = "block";
+}
+```
+
+## 将样式表复制到画中画窗口
+
+要从原始窗口复制所有 CSS 样式表，请循环遍历文档中明确链接或嵌入的所有样式表（通过 {{domxref("Document.styleSheets")}}），然后将其附加到画中画窗口。请注意，这是一次性复制。
+
+```js
+// ...
+
+// 从初始文档复制样式表，以便播放器看起来相同。
+[...document.styleSheets].forEach((styleSheet) => {
+  try {
+    const cssRules = [...styleSheet.cssRules]
+      .map((rule) => rule.cssText)
+      .join("");
+    const style = document.createElement("style");
+
+    style.textContent = cssRules;
+    pipWindow.document.head.appendChild(style);
+  } catch (e) {
+    const link = document.createElement("link");
+
+    link.rel = "stylesheet";
+    link.type = styleSheet.type;
+    link.media = styleSheet.media;
+    link.href = styleSheet.href;
+    pipWindow.document.head.appendChild(link);
+  }
+});
+
+// ...
+```
+
+## 画中画模式下目标样式
+
+{{cssxref("@media/display-mode", "display-mode")}} [媒体特性](/zh-CN/docs/Web/CSS/@media#媒体特性) 的 `picture-in-picture` 值允许开发人员根据文档是否以画中画模式显示来将 CSS 应用于文档。基本用法如下：
+
+```css
+@media (display-mode: picture-in-picture) {
+  body {
+    background: red;
+  }
+}
+```
+
+仅当以画中画模式显示时，此代码片段才会将文档 `` 的背景变为红色。
+
+在[我们的演示](https://mdn.github.io/dom-examples/document-picture-in-picture/)中，我们将 `display-mode: picture-in-picture` 值与 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 媒体特性相结合，以根据用户的配色方案偏好创建仅当应用以画中画模式显示时才应用的明暗配色方案。
+
+```css
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+  body {
+    background: antiquewhite;
+  }
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+  body {
+    background: #333;
+  }
+
+  a {
+    color: antiquewhite;
+  }
+}
+```
+
+## 处理画中画窗口关闭时的情况
+
+当第二次按下按钮时，切换画中画窗口再次关闭的代码如下所示：
+
+```js
+inPipMessage.style.display = "none";
+playerContainer.append(videoPlayer);
+window.documentPictureInPicture.window.close();
+```
+
+在这里，我们恢复 DOM 更改——隐藏消息并将视频播放器放回主应用窗口中的播放器容器中。我们还使用 {{domxref("Window.close()")}} 方法以编程方式关闭画中画窗口。
+
+但是，你还需要考虑用户通过按下窗口本身上浏览器提供的关闭（X）按钮来关闭画中画窗口的情况。你可以通过使用 [`pagehide`](/zh-CN/docs/Web/API/Window/pagehide_event) 事件检测窗口何时关闭来处理这种情况：
+
+```js
+pipWindow.addEventListener("pagehide", (event) => {
+  inPipMessage.style.display = "none";
+  playerContainer.append(videoPlayer);
+});
+```
+
+## 监听网站何时进入画中画模式
+
+监听 `DocumentPictureInPicture` 实例上的 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件，了解画中画窗口何时打开。
+
+在我们的演示中，我们使用 `enter` 事件向画中画窗口添加静音切换按钮：
+
+```js
+documentPictureInPicture.addEventListener("enter", (event) => {
+  const pipWindow = event.window;
+  console.log("视频播放器已进入画中画窗口");
+
+  const pipMuteButton = pipWindow.document.createElement("button");
+  pipMuteButton.textContent = "静音";
+  pipMuteButton.addEventListener("click", () => {
+    const pipVideo = pipWindow.document.querySelector("#video");
+    if (!pipVideo.muted) {
+      pipVideo.muted = true;
+      pipMuteButton.textContent = "取消静音";
+    } else {
+      pipVideo.muted = false;
+      pipMuteButton.textContent = "静音";
+    }
+  });
+
+  pipWindow.document.body.append(pipMuteButton);
+});
+```
+
+> **备注：** {{domxref("DocumentPictureInPictureEvent")}} 事件对象包含一个 `window` 属性，用于访问画中画窗口。
+
+## 访问元素并处理事件
+
+你可以通过多种不同的方式访问画中画窗口中的元素：
+
+- {{domxref("DocumentPictureInPicture.requestWindow()")}} 方法返回的 {{domxref("Window")}} 实例，如上所示。
+- 通过 {{domxref("DocumentPictureInPictureEvent")}} 事件对象的 `window` 属性（在 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件上），如上所示。
+- 通过 {{domxref("DocumentPictureInPicture.window")}} 属性：
+
+```js
+const pipWindow = window.documentPictureInPicture.window;
+if (pipWindow) {
+  // 使画中画窗口中播放的视频静音。
+  const pipVideo = pipWindow.document.querySelector("#video");
+  pipVideo.muted = true;
+}
+```
+
+一旦获得了对画中画 `window` 实例的引用，你就可以操作 DOM（例如创建按钮）并响应用户输入事件（例如 [`click`](/zh-CN/docs/Web/API/Element/click_event) 事件），就像在常规浏览器窗口上下文中正常执行一样。

From 9988cde87e72eb7a6463444dc8c383cfc9c4c30c Mon Sep 17 00:00:00 2001
From: mdn-bot <108879845+mdn-bot@users.noreply.github.com>
Date: Mon, 30 Sep 2024 01:30:29 +0000
Subject: [PATCH 038/148] ja: sync translated content

---
 files/ja/_redirects.txt                                  | 3 ++-
 files/ja/_wikihistory.json                               | 8 ++++----
 files/ja/web/api/{ => window}/createimagebitmap/index.md | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)
 rename files/ja/web/api/{ => window}/createimagebitmap/index.md (98%)

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 3179efb3068144..5808b0ce62ba0d 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3218,7 +3218,7 @@
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/caches	/ja/docs/Web/API/Window/caches
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/ja/docs/Web/API/clearInterval
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/ja/docs/Web/API/clearTimeout
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/createImageBitmap
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/ja/docs/Web/API/Window/fetch
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/ja/docs/Web/API/Window/indexedDB
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/ja/docs/Web/API/Window/isSecureContext
@@ -3276,6 +3276,7 @@
 /ja/docs/Web/API/console/timeStamp	/ja/docs/Web/API/console/timeStamp_static
 /ja/docs/Web/API/console/trace	/ja/docs/Web/API/console/trace_static
 /ja/docs/Web/API/console/warn	/ja/docs/Web/API/console/warn_static
+/ja/docs/Web/API/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/crypto_property	/ja/docs/Web/API/Window/crypto
 /ja/docs/Web/API/document.URL	/ja/docs/Web/API/Document/URL
 /ja/docs/Web/API/document.activeElement	/ja/docs/Web/API/Document/activeElement
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index cd2c352fa5268f..15af3bf9a902b0 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13927,6 +13927,10 @@
     "modified": "2020-10-15T22:27:12.990Z",
     "contributors": ["mfuji09"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:34:31.000Z",
+    "contributors": ["silverskyvicto"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-10-15T21:16:38.249Z",
     "contributors": [
@@ -15161,10 +15165,6 @@
     "modified": "2019-03-23T22:34:47.743Z",
     "contributors": ["yyss"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:34:31.000Z",
-    "contributors": ["silverskyvicto"]
-  },
   "Web/API/setInterval": {
     "modified": "2020-10-15T21:15:06.280Z",
     "contributors": [
diff --git a/files/ja/web/api/createimagebitmap/index.md b/files/ja/web/api/window/createimagebitmap/index.md
similarity index 98%
rename from files/ja/web/api/createimagebitmap/index.md
rename to files/ja/web/api/window/createimagebitmap/index.md
index 89c4239eb28407..9c4d597ff1db18 100644
--- a/files/ja/web/api/createimagebitmap/index.md
+++ b/files/ja/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 l10n:
   sourceCommit: 32539676aca5ea2913cfaefeab3ba986ecd2206f
 ---

From 0d064f85bb42206be8e774bd23eff3c12ac8a05b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Thu, 26 Sep 2024 23:18:40 +0900
Subject: [PATCH 039/148] =?UTF-8?q?2024/03/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/url/protocol/index.md | 8 +++-----
 files/ja/web/api/url/username/index.md | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/api/url/protocol/index.md b/files/ja/web/api/url/protocol/index.md
index a513138eefc5c3..771c65e5009b79 100644
--- a/files/ja/web/api/url/protocol/index.md
+++ b/files/ja/web/api/url/protocol/index.md
@@ -3,15 +3,13 @@ title: "URL: protocol プロパティ"
 short-title: protocol
 slug: Web/API/URL/protocol
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`protocol`** は {{domxref("URL")}} インターフェイスのプロパティで、最後の `':'` を含む URL のプロトコルスキームを表す文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.protocol); // "https:" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/username/index.md b/files/ja/web/api/url/username/index.md
index d89a535a6e37fa..4ae87bf8e48b10 100644
--- a/files/ja/web/api/url/username/index.md
+++ b/files/ja/web/api/url/username/index.md
@@ -3,15 +3,13 @@ title: "URL: username プロパティ"
 short-title: username
 slug: Web/API/URL/username
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`username`** は {{domxref("URL")}} インターフェイスのプロパティで、ドメイン名の前に指定されたユーザー名をの入った文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.username); // "anonymous" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 

From 6dd0230e5ae350dd8c5080d84d20eae190f793e0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Thu, 26 Sep 2024 23:32:14 +0900
Subject: [PATCH 040/148] =?UTF-8?q?2024/07/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/url/createobjecturl_static/index.md  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/api/url/createobjecturl_static/index.md b/files/ja/web/api/url/createobjecturl_static/index.md
index 8c50d87adbf6cd..1231ff600fb7c6 100644
--- a/files/ja/web/api/url/createobjecturl_static/index.md
+++ b/files/ja/web/api/url/createobjecturl_static/index.md
@@ -3,18 +3,16 @@ title: "URL: createObjectURL() 静的メソッド"
 short-title: createObjectURL()
 slug: Web/API/URL/createObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.createObjectURL()`** 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
+**`createObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
 
 URL の寿命は、それを作成したウィンドウ内の {{domxref("document")}} と結び付けられています。 新しいオブジェクト URL は、指定された {{domxref("File")}} オブジェクトか {{domxref("Blob")}} オブジェクトを表します。
 
-オブジェクト URL を解放するには、 {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
-
-{{AvailableInWorkers}}
+オブジェクト URL を解放するには、 {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
 
 > [!NOTE]
 > この機能はメモリーリークを生み出す可能性があるため、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内で利用することは*できません*。
@@ -44,14 +42,14 @@ URL.createObjectURL(object)
 
 すでにオブジェクト URL が生成されている場合でも、 `createObjectURL()` を呼び出す度に、新しいオブジェクト URL が生成されます。 必要がなくなったら {{domxref("URL.revokeObjectURL_static")}} を呼び出して、それぞれを解放してください。
 
-ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、性能とメモリ使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
+ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリーから解放します。しかし、性能とメモリー使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
 
 ### メディアストリームのオブジェクト URL の使用
 
 古いバージョンの Media Source 仕様書では、 {{HTMLElement("video")}} 要素にストリームを添付するには {{domxref("MediaStream")}} にオブジェクト URL を生成する必要があるとしてます。 これはもう必要なく、ブラウザーはこのようにする対応を削除してきています。
 
 > [!WARNING]
-> もし {{domxref("URL/createObjectURL_static", "createObjectURL()")}} でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
+> もし `createObjectURL()` でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
 
 ## 仕様書
 
@@ -65,6 +63,6 @@ URL.createObjectURL(object)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.revokeObjectURL_static")}}
+- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}}
 - {{domxref("HTMLMediaElement.srcObject")}}
 - {{domxref("FileReader.readAsDataURL()")}}

From ee14a96364b038bdb1d1ff3eae3d93c609da0c60 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 30 Sep 2024 22:10:23 +0900
Subject: [PATCH 041/148] =?UTF-8?q?2024/07/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3=20(#23793)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* Update index.md
---
 files/ja/web/api/url/parse_static/index.md | 136 +++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 files/ja/web/api/url/parse_static/index.md

diff --git a/files/ja/web/api/url/parse_static/index.md b/files/ja/web/api/url/parse_static/index.md
new file mode 100644
index 00000000000000..e19ed3d97e94f5
--- /dev/null
+++ b/files/ja/web/api/url/parse_static/index.md
@@ -0,0 +1,136 @@
+---
+title: "URL: parse() 静的メソッド"
+short-title: parse()
+slug: Web/API/URL/parse_static
+l10n:
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
+---
+
+{{ApiRef("URL API")}}
+
+**`URL.parse()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で定義された {{domxref("URL")}} を表す、新たに作成された URL オブジェクトを返します。
+
+指定されたベース URL または結果の URL が解析可能で有効な URL でない場合、`null` が返されます。
+これは、{{domxref("URL.URL", "URL()")}} コンストラクターを使用することに対する、[try...catch](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロック内で `URL` を構築したり、 {{domxref("URL.canParse_static", "canParse()")}} を使用して引数を調べ、メソッドが `false` を返した場合に `null` を返したりする代替手段です。
+
+## 構文
+
+```js-nolint
+URL.parse(url)
+URL.parse(url, base)
+```
+
+### 引数
+
+- `url`
+  - : 文字列、または{{Glossary("stringifier", "文字列化")}}を持つオブジェクトで、絶対 URL または URL への相対参照を表します。
+    `url` が相対参照の場合、`base` は要求され、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL の場合、指定された `base` は結果の URL を作成するために使用されません。
+- `base` {{optional_inline}}
+
+  - : `url` が相対 URL の場合に利用するベース URL を表す文字列です。
+    指定しない場合、既定では `undefined` となります。
+
+    `base` URL を指定すると、解決された URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL のカレントディレクトリーを基準として解決されます。
+    ルートへの相対参照は、`base` のオリジンを基準として解決されます。 詳細については、[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
+> **Note:** `url` および `base` 引数は、渡した値が例えば {{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} 要素など、何であれそれぞれ文字列化されます。文字列を受け入れる他の Web API と同様です。
+> 具体的には、どちらかの引数に既存の {{domxref("URL")}} オブジェクトを使用することができます。そのオブジェクトの {{domxref("URL.href", "href")}} プロパティから文字列化されます。
+
+### 返値
+
+引数が有効な URL に解決できた場合は `URL` です。そうでなければ `null` です。
+
+## 例
+
+[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)および [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL#examples)の記事には、`url` および `base` 値が最終的な絶対 URL に解決される方法を示す例がもっとあります（主に `URL()` を使用するものですが）。
+
+### URL.parse() の使用
+
+この例では、いくつかの異なる絶対参照値と相対参照値に対して、静的メソッド `URL.parse()` を使用する方法を説明しています。
+
+```html hidden
+
    
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+最初に、`URL.parse()` メソッドに対応しているかどうかを `"parse" in URL` という条件式でチェックします。
+メソッドが対応している場合、絶対URL、相対参照、ベース URL、より[複雑なベース URL](/ja/docs/Web/API/URL_API/Resolving_relative_references) を持つ相対参照、有効なベース URL を持つ有効な絶対 URL（これは使用されません）、およびメソッドが `null` を返す不正なベース URL のチェック結果をログ出力します。
+
+また、`URL.parse()` に対応していない場合にもログ出力します。
+
+```js-nolint
+if ("parse" in URL) {
+  // Absolute URL
+  let result = URL.parse("https://developer.mozilla.org/ja/docs");
+  log(`[1]: ${result.href}`);
+
+  // 相対参照を有効なベース URL へ
+  result = URL.parse("ja/docs", "https://developer.mozilla.org");
+  log(`[2]: ${result.href}`);
+
+  // 相対参照を「複雑」で有効なベース URL へ
+  // （スキームとドメインのみを使用して URL を解決します）
+  result = URL.parse(
+    "/different/place",
+    "https://developer.mozilla.org:443/some/path?id=4",
+  );
+  log(`[3]: ${result.href}`);
+
+  // 絶対 URL の引数（ベース URL は無視される）
+  result = URL.parse(
+    "https://example.org/some/docs",
+    "https://developer.mozilla.org",
+  );
+  log(`[4]: ${result.href}`);
+
+  // 無効なベース URL（コロンの付け忘れ）
+  result = URL.parse("ja/docs", "https//developer.mozilla.org");
+  log(`[5]: ${result}`);
+} else {
+  log("URL.parse() に対応していません");
+}
+```
+
+最後に、下記のコードでは、`base` 引数に `URL` オブジェクトを渡すとことで、引数が文字列でなくてもよいことを示しています。
+
+```js
+if ("parse" in URL) {
+  // URL オブジェクトとして指定されたベース URL との相対参照
+  result = URL.parse("/ja/docs", new URL("https://developer.mozilla.org/"));
+  log(`[6]: ${result.href}`);
+}
+```
+
+それぞれのチェックを以下に表示します。
+
+{{EmbedLiveSample('URL.parse()', '100%')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL): 渡された引数が不正な引数を定義している場合は例外が発生します。
+- [`URL.parse()` のポリフィル](https://github.com/zloirock/core-js#url-and-urlsearchparams) が [`core-js`](https://github.com/zloirock/core-js) で利用できます

From d98855af04689d17c896ba44fe3ec971dcde4cc5 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Thu, 26 Sep 2024 23:17:26 +0900
Subject: [PATCH 042/148] =?UTF-8?q?2024/07/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=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/url/port/index.md            | 26 ++++++++++++++-----
 .../api/url/revokeobjecturl_static/index.md   | 17 ++++++------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/files/ja/web/api/url/port/index.md b/files/ja/web/api/url/port/index.md
index 3415f48a603f1e..da808a0ce360ba 100644
--- a/files/ja/web/api/url/port/index.md
+++ b/files/ja/web/api/url/port/index.md
@@ -3,17 +3,15 @@ title: "URL: port プロパティ"
 short-title: port
 slug: Web/API/URL/port
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`port`** は {{domxref("URL")}} インターフェイスのプロパティで、この URL のポート番号の入った文字列です。
 
 > **メモ:** [`URL()`](/ja/docs/Web/API/URL/URL) コンストラクターに渡された入力文字列が明示的なポート番号を含んでいないか（例えば `https://localhost`）、入力文字列のプロトコル部分に対応する既定のポート番号を含んでいる場合（例えば `https://localhost:443`）、コンストラクターが返す [`URL`](/ja/docs/Web/API/URL) オブジェクトの port プロパティの値は空文字列 (`''`) になります。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -21,11 +19,25 @@ l10n:
 ## 例
 
 ```js
-const url = new URL("https://example.com:80/svn/Repos/");
-console.log(url.port); // '80' と出力
+// https プロトコルで既定ではないポート番号
+new URL("https://example.com:5443/svn/Repos/").port; // '5443'
+// http プロトコルで既定ではないポート番号
+new URL("http://example.com:8080/svn/Repos/").port; // '8080'
+// https プロトコルで既定のポート番号
+new URL("https://example.com:443/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで既定のポート番号
+new URL("http://example.com:80/svn/Repos/").port; // ''（空文字列）
+// https プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// ftp プロトコルで既定ではないポート番号
+new URL("ftp://example.com:221/svn/Repos/").port; // '221'
+// ftp プロトコルで既定のポート番号
+new URL("ftp://example.com:21/svn/Repos/").port; // ''（空文字列）
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/revokeobjecturl_static/index.md b/files/ja/web/api/url/revokeobjecturl_static/index.md
index e4917f08d6b645..2782ae779a4d89 100644
--- a/files/ja/web/api/url/revokeobjecturl_static/index.md
+++ b/files/ja/web/api/url/revokeobjecturl_static/index.md
@@ -3,19 +3,18 @@ title: "URL: revokeObjectURL() 静的メソッド"
 short-title: revokeObjectURL()
 slug: Web/API/URL/revokeObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.revokeObjectURL()`** 静的メソッドは、以前に {{domxref("URL.createObjectURL_static") }} を呼び出して生成された既存のオブジェクト URL を解放します。
+**`revokeObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、以前に {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を呼び出して生成された既存のオブジェクト URL を解放します。
 
-オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせます。
-
-{{AvailableInWorkers}}
+オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせてください。
 
 > [!NOTE]
-> このメソッドは、{{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるため、サービスワーカーからは利用できません。
+> このメソッドは、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)からは利用できません。
+> {{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるためです。
 
 ## 構文
 
@@ -26,7 +25,7 @@ URL.revokeObjectURL(objectURL)
 ### 引数
 
 - `objectURL`
-  - : 以前に {{domxref("URL/createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
+  - : 以前に {{domxref("URL.createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
 
 ### 返値
 
@@ -48,4 +47,4 @@ URL.revokeObjectURL(objectURL)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.createObjectURL_static") }}
+- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}

From b0ba8ac5601de10ec9cbe5346d8fc376732139d7 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:33:28 +0200
Subject: [PATCH 043/148] [es] sync translated content (#23853)

es: sync translated content
---
 files/es/_redirects.txt                                  | 3 ++-
 files/es/_wikihistory.json                               | 8 ++++----
 files/es/web/api/{ => window}/createimagebitmap/index.md | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)
 rename files/es/web/api/{ => window}/createimagebitmap/index.md (97%)

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index ad5291f6fb8ce4..7ad52be1fe9053 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1738,7 +1738,7 @@
 /es/docs/Web/API/WindowOrWorkerGlobalScope/caches	/es/docs/Web/API/Window/caches
 /es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/es/docs/Web/API/clearInterval
 /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/es/docs/Web/API/clearTimeout
-/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/createImageBitmap
+/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/es/docs/Web/API/Window/fetch
 /es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/es/docs/Web/API/Window/indexedDB
 /es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/es/docs/Web/API/Window/isSecureContext
@@ -1767,6 +1767,7 @@
 /es/docs/Web/API/console/timeEnd	/es/docs/Web/API/console/timeEnd_static
 /es/docs/Web/API/console/trace	/es/docs/Web/API/console/trace_static
 /es/docs/Web/API/console/warn	/es/docs/Web/API/console/warn_static
+/es/docs/Web/API/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/crypto_property	/es/docs/Web/API/Window/crypto
 /es/docs/Web/API/event.defaultPrevented	/es/docs/Web/API/Event/defaultPrevented
 /es/docs/Web/API/event.which	/es/docs/Web/API/UIEvent/which
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 4c761971946439..8767e730952d65 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -5472,6 +5472,10 @@
     "modified": "2019-03-23T22:45:47.266Z",
     "contributors": ["julian3xl"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:14:17.553Z",
+    "contributors": ["Bumxu"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-02-12T20:26:38.795Z",
     "contributors": ["joseluisq", "AlePerez92", "victorjavierss"]
@@ -5767,10 +5771,6 @@
     "modified": "2020-10-15T21:53:36.780Z",
     "contributors": ["juanluisrp", "oderflaj"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:14:17.553Z",
-    "contributors": ["Bumxu"]
-  },
   "Web/API/notification/icon": {
     "modified": "2019-03-23T22:59:32.492Z",
     "contributors": ["joxhker"]
diff --git a/files/es/web/api/createimagebitmap/index.md b/files/es/web/api/window/createimagebitmap/index.md
similarity index 97%
rename from files/es/web/api/createimagebitmap/index.md
rename to files/es/web/api/window/createimagebitmap/index.md
index 43a86129ef01de..51a5e63062eef2 100644
--- a/files/es/web/api/createimagebitmap/index.md
+++ b/files/es/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: self.createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 ---
 
 {{APIRef("Canvas API")}}

From c41f46232d5037c16202ee32684f392470c8a3a6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:16:11 +0200
Subject: [PATCH 044/148] Bump fdir from 6.3.0 to 6.4.0 (#23857)

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

diff --git a/package.json b/package.json
index 0adf8aabd2276c..dc17c86fca0394 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "autocorrect-node": "2.11.1",
     "cld": "^2.10.0",
-    "fdir": "^6.3.0",
+    "fdir": "^6.4.0",
     "front-matter": "^4.0.2",
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
diff --git a/yarn.lock b/yarn.lock
index 96df4edfd2f8dc..928d8a3281667c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -327,10 +327,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fdir@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.3.0.tgz#fcca5a23ea20e767b15e081ee13b3e6488ee0bb0"
-  integrity sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==
+fdir@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.0.tgz#8e80ab4b18a2ac24beebf9d20d71e1bc2627dbae"
+  integrity sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==
 
 fill-range@^7.1.1:
   version "7.1.1"

From 743a5d9923120c67d7f82d7d110f9d8089e4e581 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Tue, 1 Oct 2024 05:21:15 +0200
Subject: [PATCH 045/148] Markdownlint auto-cleanup for zh-cn (#23863)

---
 .../zh-cn/mozilla/add-ons/webextensions/api/extension/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
index a7c39bd392a4e4..8a7393724e166e 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
@@ -56,7 +56,7 @@ l10n:
 {{WebExtExamples("h2")}}
 
 > [!NOTE]
-> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.com/docs/extensions/reference/api/extension/) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
 
 
+
+```
+
+## 属性の変更への応答
+
+組み込み要素と同様に、カスタム要素も HTML 属性を使用して要素の動作を設定することができます。属性を効果的に使用するには、要素が属性値の変更に対応できなければなりません。これを実現するには、カスタム要素を実装するクラスに以下のメンバーを追加する必要があります。
+
+- `observedAttributes` という名前の静的プロパティ。これは、その要素が変更通知を必要とするすべての属性の名前を含む配列でなければなりません。
+- `attributeChangedCallback()` ライフサイクルコールバックの実装。
+
+`attributeChangedCallback()` コールバックは、要素の `observedAttributes` プロパティにリストされた名前の属性が追加、修正、削除、置換されるたびに呼び出されます。
+
+コールバックには 3 つの引数が渡されます。
+
+- 変更された属性の名前。
+- 属性の古い値。
+- 属性の新しい値。
+
+例えば、この自律的な要素は `size` 属性を監視し、値が変更された際に新旧の値を記録します。
 
 ```js
-class PopupInfo extends HTMLElement {
+// 要素のためのクラスを作成
+class MyCustomElement extends HTMLElement {
+  static observedAttributes = ["size"];
+
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
     super();
+  }
 
-    // ここに要素の機能を記述します
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(
+      `Attribute ${name} has changed from ${oldValue} to ${newValue}.`,
+    );
   }
 }
+
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+要素の HTML 宣言に監視される属性が含まれている場合、その属性が初期化された後に、要素の宣言が最初に解釈された時点で `attributeChangedCallback()` が呼び出されることに
+注意してください。 したがって、以下の例では、たとえ属性がその後変更されることがなかったとしても、DOM が解釈された時点で `attributeChangedCallback()` が呼び出されます。
+
+```html
+
 ```
 
-前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+`attributeChangedCallback()` の使用を示す完全な例については、このページの[ライフサイクルコールバック](#ライフサイクルコールバックの使用)を参照してください。
+
+### カスタム状態と CSS のカスタム状態擬似クラスセレクター
+
+HTML 要素に組み込まれた要素は、「ホバー」、「無効」、「読み取り専用」など、様々な状態を取ります。。
+これらの状態の一部は、HTML または JavaScript を使用して属性として設定できますが、内部的なものもあり、設定できないものもあります。
+外部または内部に関わらず、これらの状態には通常、特定の状態にある要素を選択し、スタイルを適用するために使用できる対応する [CSS 擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)が存在します。
+
+また、自律型カスタム要素（組み込み要素をベースにした要素を除く）では、擬似クラス関数 `:state()` を使用して状態を定義し、それに対して選択を行うこともできます。
+以下のコードでは、内部状態 "`collapsed`" を持つ自律型カスタム要素の例を使用して、その動作を示しています。
 
-コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。
+`collapsed` の状態は、要素の外からは見えない論理値プロパティ（セッターとゲッターメソッド付き）として表現されます。
+この状態を CSS で選択できるようにするために、カスタム要素は最初のコンストラクターで {{domxref("HTMLElement.attachInternals()")}} を呼び出し、{{domxref("ElementInternals")}} オブジェクトを装着します。これにより、{{domxref("ElementInternals.states")}} プロパティを通じて {{domxref("CustomStateSet")}} にアクセスできるようになります。
+（内部で）折りたたまれた状態のセッターは、状態が `true` であれば `CustomStateSet` に識別子 `hidden` を追加し、状態が `false` であれば除去します。 識別子は単なる文字列です。この場合、`hidden` と呼びましたが、`collapsed` と読んでも同じように機能します。
 
 ```js
-// シャドウルートを生成
-this.attachShadow({ mode: "open" }); // 'this.shadowRoot' を設定して返す
-
-//（内部の）span 要素を生成
-const wrapper = document.createElement("span");
-wrapper.setAttribute("class", "wrapper");
-const icon = wrapper.appendChild(document.createElement("span"));
-icon.setAttribute("class", "icon");
-icon.setAttribute("tabindex", 0);
-// アイコンを、定義された属性または既定のアイコンから挿入
-const img = icon.appendChild(document.createElement("img"));
-img.src = this.hasAttribute("img")
-  ? this.getAttribute("img")
-  : "img/default.png";
-// 画像を追加する際には、常に説明文を含めるようする
-img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : "";
-
-const info = wrapper.appendChild(document.createElement("span"));
-info.setAttribute("class", "info");
-// 属性の中身を取得し、 info の span の中に入れる
-info.textContent = this.getAttribute("data-text");
-
-// CSS を作成しシャドウ DOM に割り当てる
-const style = document.createElement("style");
-style.textContent = `.wrapper {
-  /* 簡略化のために CSS は省略 */
-}`;
+class MyCustomElement extends HTMLElement {
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
 
-// 生成された要素をシャドウ DOM に添付する
-this.shadowRoot.append(style, wrapper);
+  get collapsed() {
+    return this._internals.states.has("hidden");
+  }
+
+  set collapsed(flag) {
+    if (flag) {
+      // Existence of identifier corresponds to "true"
+      this._internals.states.add("hidden");
+    } else {
+      // Absence of identifier corresponds to "false"
+      this._internals.states.delete("hidden");
+    }
+  }
+}
+
+// Register the custom element
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+カスタム要素の `CustomStateSet` (`this._internals.states`) に追加された識別子を使用して、要素のカスタム状態と照合することができます。
+これは、[`:state()`](/ja/docs/Web/CSS/:state) 擬似クラスに識別子を渡すと照合されます。
+例えば、下記では、`hidden` セレクターを使用して、`hidden` 状態が `true`（したがって、要素が`collapsed` 状態）であることを選択し、境界線を削除します。
+
+```css
+my-custom-element {
+  border: dashed red;
+}
+my-custom-element:state(hidden) {
+  border: none;
+}
+```
+
+`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用すると、[カスタム要素のシャドウ DOM 内の](/ja/docs/Web/CSS/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom)カスタム状態と照合することもできます。
+さらに、`:state()` 擬似クラスを [`::part()`](/ja/docs/Web/CSS/::part) 擬似要素の後で使用することで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することもできます。
+
+{{domxref("CustomStateSet")}} には、これがどのように動作するのかを示すいくつかのライブサンプルがあります。
+
+## 例
+
+このガイドの残りの部分では、いくつかのカスタム要素の例を見ていきます。 これらの例のすべて、およびその他のソースは、[web-components-examples](https://github.com/mdn/web-components-examples) リポジトリーで参照できます。また、すべてをライブで確認するには、 にアクセスしてください。
+
+### 自律カスタム要素
+
+まず、自律カスタム要素の例を見てみましょう。`` カスタム要素は、画像アイコンとテキスト文字列を属性として取り、アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component)
+
+最初に {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。
+
+```js
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
+
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // いくらかの CSS を生成してシャドウ DOM に適用
+    const style = document.createElement("style");
+    console.log(style.isConnected);
+
+    style.textContent = `
+      .wrapper {
+        position: relative;
+      }
+
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+        opacity: 0;
+        transition: 0.6s all;
+        position: absolute;
+        bottom: 20px;
+        left: 10px;
+        z-index: 3;
+      }
+
+      img {
+        width: 1.2rem;
+      }
+
+    .icon:hover + .info, .icon:focus + .info {
+        opacity: 1;
+      }
+    `;
+
+    // 生成要素をシャドウ DOM に結びつける
+    shadow.appendChild(style);
+    console.log(style.isConnected);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+前述のコードスニペットはクラスのコンストラクター（[`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)）の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+
+`connectedCallback()` メソッド内で、要素が DOM に接続された際にその要素が持つすべての機能を定義します。この例では、シャドウルートをカスタム要素に割り当て、DOM 操作を使用して要素の内部シャドウルート構造を作成します（そしてシャドウルートに割り当てます）。最後に、シャドウルートにいくつかの CSS を割り当ててスタイル設定します。要素の属性は DOM に接続されるまで利用できないため、コンストラクターでは処理はうまくいきません。
+
 最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。
 
 ```js
@@ -126,55 +354,157 @@ customElements.define("popup-info", PopupInfo);
   back of your card.">
 ```
 
-> [!NOTE]
-> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。
-
 ### 内部スタイルと外部スタイル
 
-上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
+上記の例では、{{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。この例では、外部スタイルシートを使用するように `` カスタム要素を変更します。
 
-例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-external-stylesheet)
+
+こちらがクラス定義です。
 
 ```js
-// 外部スタイルシートをシャドウ DOM に適用
-const linkElem = document.createElement("link");
-linkElem.setAttribute("rel", "stylesheet");
-linkElem.setAttribute("href", "style.css");
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
 
-// 生成された要素をシャドウ DOM に添付
-shadow.appendChild(linkElem);
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // 外部スタイルシートをシャドウ DOM に適用
+    const linkElem = document.createElement("link");
+    linkElem.setAttribute("rel", "stylesheet");
+    linkElem.setAttribute("href", "style.css");
+
+    // 生成した要素をシャドウ DOM に結びつける
+    shadow.appendChild(linkElem);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+これは、元の `` の例とほぼ同じですが、外部スタイルシートにリンクするために、シャドウ DOM に追加する {{HTMLElement("link")}} 要素を使用している点が異なります。
+
 なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
 
 最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
 
-### カスタマイズされた組み込み要素
+### カスタム組み込み要素
 
-ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) です。（[ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)） これにより番号なしリストが展開・収納するメニューになります。
+ここで、もう 1 つの組み込み要素の例を見てみましょう。この例は、組み込みの {{HTMLElement("ul")}} 要素を拡張して、リストアイテムが展開・収納するするようにします。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/expanding-list-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component)
+
+> [!NOTE]
+> カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。
 
 まず始めに、これまでと同様の方法でクラス要素を定義します。
 
 ```js
+// 要素のためのクラスを作成
 class ExpandingList extends HTMLUListElement {
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
-    super();
+    // コンストラクターでは super を常に最初に呼び出す
+    // super() の返値はこの要素への参照
+    self = super();
+  }
 
-    // ここに要素の機能を記述します
+  connectedCallback() {
+    // このカスタム ul 要素の子である ul および li 要素を取得する
+    // li 要素は、その中に ul がある場合、コンテナーとして機能する
+    const uls = Array.from(self.querySelectorAll("ul"));
+    const lis = Array.from(self.querySelectorAll("li"));
+    // すべての子の ul を隠す
+    // これらのリストは、ユーザーが上位レベルのコンテナーをクリックしたときに表示される
+    uls.forEach((ul) => {
+      ul.style.display = "none";
+    });
+
+    // ul内のli要素をそれぞれ見ていく
+    lis.forEach((li) => {
+      // この li に ul が子要素としてある場合、クリックハンドラーを追加する
+      if (li.querySelectorAll("ul").length > 0) {
+        // スタイル設定で使用できる属性を追加し、
+        // 開く・閉じるアイコンを表示させる
+        li.setAttribute("class", "closed");
+
+        // li 要素のテキストを新しい span 要素で囲むことで、
+        // span にスタイルやイベントハンドラーを割り当てることができる
+        const childText = li.childNodes[0];
+        const newSpan = document.createElement("span");
+
+        // li から span にテキストをコピーし、カーソルスタイルを設定
+        newSpan.textContent = childText.textContent;
+        newSpan.style.cursor = "pointer";
+
+        // この span にクリックハンドラーを追加
+        newSpan.addEventListener("click", (e) => {
+          // span 要素の次兄弟要素は ul であるはず
+          const nextul = e.target.nextElementSibling;
+
+          // 表示状態を切り替え、ul の class 属性を更新
+          if (nextul.style.display == "block") {
+            nextul.style.display = "none";
+            nextul.parentNode.setAttribute("class", "closed");
+          } else {
+            nextul.style.display = "block";
+            nextul.parentNode.setAttribute("class", "open");
+          }
+        });
+        // span を追加し、li から裸のテキストノードを除去
+        childText.parentNode.insertBefore(newSpan, childText);
+        childText.parentNode.removeChild(childText);
+      }
+    });
   }
 }
 ```
 
-ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。
+なお、今回は {{domxref("HTMLElement")}} ではなく、{{domxref("HTMLUListElement")}} を拡張しています。 つまり、リストの既定の動作が得られ、独自のカスタマイズのみを実装すればよいということです。
+
+前回と同様に、コードのほとんどは `connectedCallback()` ライフサイクルコールバック内にあります。
 
-次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。
+次に、前回と同様に `define()` メソッドを使用して要素を登録しますが、今回は、カスタム要素が継承する要素の詳細を記載した options オブジェクトも含めます。
 
 ```js
 customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 ```
 
-ウェブ文書内で組み込み要素を使用する場合とはやや異なります。
+ウェブ文書内で組み込み要素を使用すると、また少し違った見え方になります。
 
 ```html
 
      
@@ -184,48 +514,45 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 
 通常のように `
        ` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。
 
-> [!NOTE]
-> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。
-
-## ライフサイクルコールバックの使用
-
-カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。
+この場合、DOM が完全に解釈された後にカスタム要素を定義するスクリプトが実行されるように保証する必要があります。`connectedCallback()` は展開されたリストが DOM に追加されると同時に呼び出されますが、その時点では子要素はまだ追加されていないため、`querySelectorAll()` の呼び出しでは何も見つかりません。これを保証する一つの方法は、スクリプトを記載する行に [defer](/ja/docs/Web/HTML/Element/script#defer) 属性を追加することです。
 
-- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。
-
-  > **メモ:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。
+```html
+
+```
 
-- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。
-- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。
-- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、静的な get `observedAttributes()` メソッドで指定されます。
+## ライフサイクルコールバック
 
-これらの使用例を見てみましょう。以下のコードは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) の例から引用しています（[実行可能なライブでも確認してください](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)）。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。
+これまでは、`connectedCallback()` というライフサイクルコールバックが 1 つだけ動作しているのを見てきました。最後の例である `` では、他にもいくつか見ていきます。この例では、自律型のカスタム要素 `` を紹介します。これは、名前付きの 2 つの属性 `"size"` および `"color"` によってサイズと色が決定される四角形を描画します。
 
-```html
-
-```
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks)
 
-クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
+クラスのコンストラクターでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
 
 ```js
+constructor() {
+  // コンストラクターでは super を常に最初に呼び出す
+  super();
+
 const shadow = this.attachShadow({ mode: "open" });
 
 const div = document.createElement("div");
 const style = document.createElement("style");
 shadow.appendChild(style);
 shadow.appendChild(div);
+}
 ```
 
-この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `
+  I'm in the shadow DOM
+
+
+
        
+I'm not in the shadow DOM
 ```
 
-### 内部スタイルと外部スタイル
+JavaScript で、シャドウ DOM を作成し、そこに `