From 3159e7e9e85dfcf779e0dc931e24c21e78b039f0 Mon Sep 17 00:00:00 2001 From: wupolung Date: Mon, 20 Jan 2025 21:22:34 +0800 Subject: [PATCH 001/221] [zh-tw] add the translation of the `title` global attribute (#25475) Co-authored-by: A1lo --- .../web/html/global_attributes/title/index.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/zh-tw/web/html/global_attributes/title/index.md diff --git a/files/zh-tw/web/html/global_attributes/title/index.md b/files/zh-tw/web/html/global_attributes/title/index.md new file mode 100644 index 00000000000000..e1d4b57ad109b7 --- /dev/null +++ b/files/zh-tw/web/html/global_attributes/title/index.md @@ -0,0 +1,104 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +l10n: + sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c +--- + +{{HTMLSidebar("Global_attributes")}} + +[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes) **`title`** 包含表示與其所屬元素相關的建議資訊的文字。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}} + +`title` 屬性的主要用途是為輔助技術標記 {{HTMLElement("iframe")}} 元素。 + +`title` 屬性也可以用於標記[資料表](/zh-TW/docs/Web/HTML/Element/table)中的元素。 + +當 `title` 屬性添加到 [``](/zh-TW/docs/Web/HTML/Element/link) 時,會創建一個備用樣式表。當使用 `` 定義備用樣式表時,此屬性是必需的,並且必須設置為非空字符串。 + +如果在 {{htmlelement('abbr')}} 開啟標籤中包含 `title` 屬性,則其值必須是縮寫或首字母縮略詞的完整擴展。建議盡可能在第一次使用縮寫或首字母縮略詞時,使用 `` 標記縮寫,並在純文本中提供其完整擴展,而不是使用 `title` 屬性。這讓所有用戶都知道縮寫或首字母縮略詞代表的名稱或術語,同時也為用戶代理提供了如何朗讀內容的提示。 + +雖然 `title` 屬性可以用於為 {{HTMLElement("input")}} 元素提供以程式設計方式關聯的標籤,但這並不是良好的做法。建議改用 {{HTMLElement("label")}}。 + +## 多行標題 + +`title` 屬性可以包含多行。每個 `U+000A LINE FEED`(`LF`)字符表示一個換行符。使用時必須小心,因為這意味著以下內容會呈現為兩行: + +### HTML + +```html +

+ 需要考量 title 中的換行問題。範例 span + 有一個帶有換行符的 title 屬性。 +

+
+

+```
+
+### JavaScript
+
+我們可以查詢 `title` 屬性並將其顯示在空的 `
` 元素中,如下所示:
+
+```js
+const span = document.querySelector("span");
+const output = document.querySelector("#output");
+output.textContent = span.title;
+```
+
+### 結果
+
+{{EmbedLiveSample('多行標題')}}
+
+## title 屬性繼承
+
+如果一個元素沒有 `title` 屬性,那麼它會從它的父節點繼承它,而父節點又可能從它的父節點繼承它,以此類推。
+
+如果此屬性設置為空字符串,則表示其祖先的 `title` 屬性無關緊要,並且不應在該元素的工具提示中使用。
+
+### HTML
+
+```html
+
+

當滑鼠移動到這上面則會顯示「CoolTip」。

+

當移動到這裡則不會顯示任何資訊。

+
+``` + +### 結果 + +{{EmbedLiveSample('title 屬性繼承')}} + +## 無障礙議題 + +使用 `title` 屬性對於以下情況會造成很大的問題: + +- 僅使用觸控設備的用戶 +- 使用鍵盤導航的用戶 +- 使用輔助技術(如螢幕閱讀器或放大鏡)進行導航的用戶 +- 具有精細動作控制障礙的用戶 +- 具有認知障礙的用戶 + +這是因為瀏覽器支援度不一致,再加上輔助技術對瀏覽器渲染頁面的額外解析,導致了這個問題。如果你需要工具提示效果,最好透過[使用更易於訪問的技術](https://inclusive-components.design/tooltips-toggletips/),以便可以透過以上瀏覽方式訪問。 + +- [3.2.5.1. title 屬性 | W3C HTML 5.2: 3.HTML 文件的語義、結構和 API](https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute) +- [使用 HTML title 屬性(更新版)| The Paciello Group](https://www.tpgi.com/using-the-html-title-attribute-updated/) +- [工具提示和切換提示——Inclusive Components](https://inclusive-components.design/tooltips-toggletips/) +- [title 屬性的試煉與磨難——24 Accessibility](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/) + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat}} + +## 參見 + +- 所有[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。 +- {{domxref("HTMLElement.title")}} 反映这个属性的。 From 62afd91967949e1d68b1e2b9fad4a7d4b243bd6e Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 20 Jan 2025 21:36:34 +0800 Subject: [PATCH 002/221] zh-CN: create `pageAction.setPopup()` (#25273) --- .../api/pageaction/setpopup/index.md | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/pageaction/setpopup/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/pageaction/setpopup/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/pageaction/setpopup/index.md new file mode 100644 index 00000000000000..9752070a227535 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/pageaction/setpopup/index.md @@ -0,0 +1,96 @@ +--- +title: pageAction.setPopup() +slug: Mozilla/Add-ons/WebExtensions/API/pageAction/setPopup +l10n: + sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262 +--- + +{{AddonSidebar}} + +设置当用户点击页面操作图标时打开的弹窗的 HTML 文档。 + +## 语法 + +```js-nolint +browser.pageAction.setPopup( + details // 对象 +) +``` + +### 参数 + +- `details` + + - : `object`。 + + - `tabId` + - : `integer`。要设置弹窗的标签页 ID。 + - `popup` + + - : `string` 或 `null`。指向要在弹窗中显示的 HTML 页面的 URL。 + + 如果传入了一个空字符串(`""`),则弹窗将被禁用且扩展将收到 {{WebExtAPIRef("pageAction.onClicked")}} 事件。 + + 如果传入了 `null`,则弹窗将重置为在 [`page_action`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) 清单键中指定的弹窗。 + +## 浏览器兼容性 + +{{Compat}} + +## 示例 + +监听 {{WebExtAPIRef("tabs.onUpdated")}} 事件,根据加载状态切换弹窗: + +```js +browser.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => { + if (changeInfo.status) { + browser.pageAction.show(tabId); + if (changeInfo.status === "loading") { + browser.pageAction.setPopup({ + tabId, + popup: "/popup/loading.html", + }); + } else { + browser.pageAction.setPopup({ + tabId, + popup: "/popup/complete.html", + }); + } + } +}); +``` + +{{WebExtExamples}} + +> [!NOTE] +> 该 API 基于 Chromium 的 [`chrome.pageAction`](https://developer.chrome.google.cn/docs/extensions/mv2/reference/pageAction#method-setPopup) API。本文衍生自 Chromium 代码中的 [`page_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json)。 + + From 67fcbaa4e8c96d1d8e3e7208c9afa7c7cf3d3d7b Mon Sep 17 00:00:00 2001 From: Bi Fuguo <1782765876@qq.com> Date: Mon, 20 Jan 2025 22:41:54 +0800 Subject: [PATCH 003/221] zh-cn: add `TouchEvent` contructor (#25471) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../web/api/touchevent/touchevent/index.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/zh-cn/web/api/touchevent/touchevent/index.md diff --git a/files/zh-cn/web/api/touchevent/touchevent/index.md b/files/zh-cn/web/api/touchevent/touchevent/index.md new file mode 100644 index 00000000000000..3728b73bf60dd6 --- /dev/null +++ b/files/zh-cn/web/api/touchevent/touchevent/index.md @@ -0,0 +1,57 @@ +--- +title: TouchEvent:TouchEvent() 构造函数 +slug: Web/API/TouchEvent/TouchEvent +l10n: + sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c +--- + +{{APIRef("Touch Events")}} + +**`TouchEvent()`** 构造函数用于创建新的 {{domxref("TouchEvent")}} 对象。 + +> [!NOTE] +> 如果使用此构造函数构造合成事件,出于安全原因,该事件将不被*信任*。只有浏览器生成的 `TouchEvent` 对象才是可信的,只有可信的事件才会触发默认操作。 + +## 语法 + +```js-nolint +new TouchEvent(type) +new TouchEvent(type, options) +``` + +### 参数 + +- `type` + - : 包含事件名称的字符串。区分大小写,浏览器将其设置为 `touchstart`、`touchend`、`touchmove`、`touchcancel`。 +- `options` {{optional_inline}} + - : 一个对象*除了在 {{domxref("UIEvent/UIEvent", "UIEvent()")}} 中定义的属性外*,还具有以下属性: + - `touches` {{optional_inline}} + - : {{domxref("TouchList")}},默认为空,是当前接触表面的每个接触点的对象列表。 + - `targetTouches` {{optional_inline}} + - : {{domxref("TouchList")}},默认为空,是触摸表面的接触点的对象列表,*并且*每个触点都是从当前事件的目标元素上开始的。 + - `changedTouches` {{optional_inline}} + - : 默认为 `[]`,类型为 `Touch[]`,是促成事件的每个接触点的对象列表。 + - `ctrlKey` {{optional_inline}} + - : 一个布尔值,默认为 `false`。指示是否同时按下了 ctrl 键。 + - `shiftKey` {{optional_inline}} + - : 一个布尔值,默认为 `false`。指示是否同时按下了 shift 键。 + - `altKey` {{optional_inline}} + - : 一个布尔值,默认为 `false`。指示是否同时按下了 alt 键。 + - `metaKey` {{optional_inline}} + - : 一个布尔值,默认为 `false`。指示是否同时按下了 meta 键。 + +### 返回值 + +一个新的 {{domxref("TouchEvent")}} 对象。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("TouchEvent")}},所构造的对象的接口。 From 7bc961b3ae3de1dfb87cc4840f354b61112aa0b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tahiel=20Mart=C3=ADn=20Devoto?= <70294522+Tahield16@users.noreply.github.com> Date: Mon, 20 Jan 2025 11:55:53 -0300 Subject: [PATCH 004/221] =?UTF-8?q?Corrected=20code=20on=20the=20note=20"?= =?UTF-8?q?=C2=BFComo=20React=20usa=20JavaScript=3F"=20(#25500)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Corrected code on the note "¿Como React usa JavaScript?" On the note, the code is identical to the JSX above. When I first saw it, I found it confusing because the explanation mentioned that the code differed, but it didn't. Upon reviewing the English documentation, I discovered that the difference was in the use of parentheses. BEFORE: Code in the main text: ```jsx const header = (

Mozilla Developer Network

); ``` Code in the note: ```jsx const header = (

Mozilla Developer Network

); ``` AFTER: Code in the main text: ```jsx const header = (

Mozilla Developer Network

); ``` Code in the note: ```jsx const header =

Mozilla Developer Network

; ``` * Apply suggestions from code review Co-authored-by: Agatem * Update files/es/learn_web_development/core/frameworks_libraries/react_getting_started/index.md --------- Co-authored-by: Juan Vásquez Co-authored-by: Agatem --- .../react_getting_started/index.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/files/es/learn_web_development/core/frameworks_libraries/react_getting_started/index.md b/files/es/learn_web_development/core/frameworks_libraries/react_getting_started/index.md index 65ded8a66ac424..86e616bcb4baac 100644 --- a/files/es/learn_web_development/core/frameworks_libraries/react_getting_started/index.md +++ b/files/es/learn_web_development/core/frameworks_libraries/react_getting_started/index.md @@ -85,12 +85,10 @@ const header = ( > [!NOTE] > Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera: > -> ```jsx -> const header = ( ->
->

Mozilla Developer Network

->
-> ); +> ```jsx-nolint +> const header =
+>

Mozilla Developer Network

+>
; > ``` > > Sin embargo, esto luce un poco raro, ya que la etiqueta [`
`](/es/docs/Web/HTML/Element/header) que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre. From 6aae9543487b87635045a99dc495453b75ac90bb Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 21 Jan 2025 00:01:21 +0800 Subject: [PATCH 005/221] [zh-cn]: sync update link (#25505) --- files/zh-cn/glossary/color_space/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/glossary/color_space/index.md b/files/zh-cn/glossary/color_space/index.md index 7780fb8c3d9022..5a0c275a9b245f 100644 --- a/files/zh-cn/glossary/color_space/index.md +++ b/files/zh-cn/glossary/color_space/index.md @@ -2,7 +2,7 @@ title: 色彩空间 slug: Glossary/Color_space l10n: - sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa + sourceCommit: c7416fd067774fc2583944d10801b56672b56631 --- {{GlossarySidebar}} @@ -36,7 +36,7 @@ HSV(色调、饱和度和值)色彩空间及其同义词 HSB(色调、饱 - `srgb-linear` 色彩空间 - : 预定义的线性光 sRGB 色彩空间 `srgb-linear` 与 `srgb`相同,只是传输函数是没有伽玛编码的线性光。`srgb-linear` 色彩空间接受三个 `r`、`g` 和 `b` 值作为数值参数,色域范围为 `0` 至 `1`。它的白点为 D65。 - `display-p3` 色彩空间 - - : **Display P3** 色彩空间由苹果公司定义,结合了 DCI-P3 色域、D65 白点和 sRGB 伽马曲线。它是一种典型的宽色域空间,适用于当前的宽色域显示器,能呈现出比 sRGB 色域更鲜艳的绿色和红色。`display-p3` 基于 `r`、`g` 和 `b`,伽玛值范围为 `0` 至 `1`。它的白点为 D65。 + - : [**Display P3**](https://www.color.org/chardata/rgb/DisplayP3.xalter) 色彩空间由苹果公司定义,结合了 DCI-P3 色域、D65 白点和 sRGB 伽马曲线。它是一种典型的宽色域空间,适用于当前的宽色域显示器,能呈现出比 sRGB 色域更鲜艳的绿色和红色。`display-p3` 基于 `r`、`g` 和 `b`,伽玛值范围为 `0` 至 `1`。它的白点为 D65。 - `a98-rgb` 色彩空间 - : `a98-rgb` 是 Adobe® 1998 RGB 色彩空间,旨在将所有 CMYK 颜色表示为 RGB。它可实现 [CIELab 色彩空间](#cielab_色彩空间)指定的约 50% 的可见色彩,比其他 RGB 色彩空间包含更多的青绿色调。伽玛内的 `r`、`g` 和 `b` 值范围从 `0` 到 `1`。它的传输曲线是一个伽马函数,不完全地接近于 1/2.2。它的白点为 D65。 - `prophoto-rgb` From ee94cda93d117c116d1243332be4322c19cb04b2 Mon Sep 17 00:00:00 2001 From: "Dr.XYZ" Date: Tue, 21 Jan 2025 14:50:13 +0800 Subject: [PATCH 006/221] [zh-TW]: update document "Standard metadata names" (#25340) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- files/zh-tw/web/html/element/meta/name/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-tw/web/html/element/meta/name/index.md b/files/zh-tw/web/html/element/meta/name/index.md index 95aee89ffde489..21c925148f7aa3 100644 --- a/files/zh-tw/web/html/element/meta/name/index.md +++ b/files/zh-tw/web/html/element/meta/name/index.md @@ -215,4 +215,4 @@ CSS Device Adaptation 規範定義了以下的後設資料名稱: ## 參見 - [Viewport `` 標籤](/zh-TW/docs/Web/HTML/Viewport_meta_tag) -- [HTML 的後設資料:`` 元素](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_meta_元素) 在 [HTML 中的標頭內容](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [後設資料:`` 元素](/zh-TW/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#metadata_meta_元素) From c09775d0a89cd5931e88c70337ff5e02b97ffd72 Mon Sep 17 00:00:00 2001 From: "Dr.XYZ" Date: Tue, 21 Jan 2025 14:51:14 +0800 Subject: [PATCH 007/221] [zh-TW]: update the `` element (#25295) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../web/html/element/fencedframe/index.md | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/files/zh-tw/web/html/element/fencedframe/index.md b/files/zh-tw/web/html/element/fencedframe/index.md index e1957045fb5c72..5456ebabcbc475 100644 --- a/files/zh-tw/web/html/element/fencedframe/index.md +++ b/files/zh-tw/web/html/element/fencedframe/index.md @@ -2,7 +2,7 @@ title: :圍欄頁框元素 slug: Web/HTML/Element/fencedframe l10n: - sourceCommit: 5618052b7314a29552ff9e4331dd3da13dc19f5e + sourceCommit: 8964db8251cf2825fa81270309a45a475184aab1 --- {{HTMLSidebar}}{{SeeCompatTable}} @@ -37,7 +37,7 @@ l10n: 可以通過策略在圍欄頁框內啟用的唯一功能是專為在圍欄頁框內使用而設計的特定功能: -- [受保護的受眾 API](https://developers.google.com/privacy-sandbox/relevance/protected-audience) +- [受保護的受眾 API](https://developers.google.com/privacy-sandbox/private-advertising/protected-audience) - `attribution-reporting` - `private-aggregation` - `shared-storage` @@ -52,19 +52,34 @@ l10n: ## 跨越圍欄頁框邊界進行對焦 -將文檔的活動焦點從圍欄頁框邊界(即從框框外的元素到內部元素,或反之)移動的能力受到限制。用戶啟動的操作,如單擊或切換,可以這樣做,因為那裡沒有指紋識別風險。 +將文件的活動焦點從圍欄頁框邊界(即從框框外的元素到內部元素,或反之)移動的能力受到限制。用戶啟動的操作,如單擊或切換,可以這樣做,因為那裡沒有指紋識別風險。 然而,試圖通過 API 調用(例如 {{domxref("HTMLElement.focus()")}})是被禁止的——惡意腳本可以使用一系列這樣的調用來跨越邊界洩露推斷的信息。 ## 定位和縮放 -作為[替換元素](/zh-TW/docs/Web/CSS/Replaced_element),可以使用 {{cssxref("object-position")}} 和 {{cssxref("object-fit")}} 屬性來調整 `