From bf0bdb099f92b13e2b61a85db6537271b28709e6 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 22 Oct 2023 21:37:46 +0800 Subject: [PATCH 001/126] zh-cn: init the translation of structured data (#16506) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../howto/json_structured_data/index.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md diff --git a/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md new file mode 100644 index 00000000000000..f369f2575ab8b4 --- /dev/null +++ b/files/zh-cn/mdn/writing_guidelines/howto/json_structured_data/index.md @@ -0,0 +1,122 @@ +--- +title: 如何使用结构化数据 +slug: MDN/Writing_guidelines/Howto/JSON_Structured_data +--- + +{{MDNSidebar}} + +MDN 尽可能以明确定义的结构存储数据。这些信息将被集中存储和更新，以便同时在多个地方使用。 + +这样的文件有好几个，本文档描述了它们的用途、结构和维护过程。 + +## GroupData：API 的逻辑分组 + +`GroupData` 是一个收集有关 Web API 的信息的 JSON 文件。API 的分组有点模糊：任何接口、方法或属性可以同时属于多个 API 分组。以某个名称分组的 API 集合是（在没有任何技术强制的情况下）用于表示某个特性的约定。 + +然而，MDN 需要这些信息来创建具有适当参考页面、指南和概述文章的连贯的 Web API 侧边栏（如 `\{{APIRef}}` 宏）。 + +GroupData 正是这样做的：对于每个 API，它列出了接口、属性、方法、指南和概述页面。在过去，它还列出了字典和回调。但是这种用法虽然仍受支持，但已被弃用，并将在未来被删除。 + +### GroupData 的结构 + +> **警告：** 本文件中列出的页面若在 en-US 中不存在，则相应的页面将被忽略。 + +`GroupData.json` 中的条目具有以下结构： + +```json +"Name_of_the_API": { + "overview": ["name_of_the_overview_page"], + "guides": [ + "name_of_guide_1", + (…) + ], + "interfaces": [ + "name_of_interface_1", + (…) + ], + "methods": [ + "name_of_additional_method_1", + (…) + ], + "properties": [ + "name_of_additional_property_1", + (…) + ], + "events": [ + "name_of_additional_property_1", + (…) + ] +} +``` + +其中： + +- `"Name_of_the_API"` + - : 该键即是侧边栏宏（如 `\{{APIRef("Name_of_the_API")}}`）使用的 ID，也是侧边栏本身显示的名称。请谨慎选择。 + > **警告：** 如果要更改侧边栏中显示的名称，则必须编辑显示该侧边栏的所有页面。 +- `"overview"` + - : 这是包含一个页面——概述页面——的列表，用作 `"Name_of_the_API"` 文本的链接。其值是页面的*标题*，页面必须位于 `web/api/` 目录中。 +- `"guides"` + - : 这是侧边栏中显示的指南列表，按给定顺序排列。其值是页面的*路径*，以 `/docs/` 开头。 +- `"interfaces"` + - : 列出了属于 API 的接口。 +- `"methods"` + - : 列出了属于 API 的方法。 + > **备注：** `"interfaces"` 中列出的接口的方法**不得**列在此处。如果页面的 `page-type` 键为 `web-api-static-method` 或 `web-api-instance-method`，则它们会被自动添加到侧边栏中。 +- `"properties"` + - : 列出了属于 API 的其他接口上的方法，例如 `navigator.xr`（WebXR API 添加到 `navigator` 对象的属性） + > **备注：** `"interfaces"` 中列出的接口的属性**不得**列在此处。如果页面的 `page-type` 键为 `web-api-static-property` 或 `web-api-instance-property`，则它们会被自动添加到侧边栏中。 +- `"events"` + - : 列出了属于 API 的其他接口的事件。其值是页面的*标题*（页面必须位于 `Web/Events` 下）。 + > **备注：** `"interfaces"` 中列出的接口的事件**不得**列在此处。如果页面的 `page-type` 键为 `web-api-event`，则它们会被自动添加到侧边栏中。 + +还有另外两个键：`"dictionaries"` 和 `"callbacks"`，它们的工作原理相同。由于我们不再为它们的实体记录自己的页面，因此它们的使用已被弃用，不应再向其中添加新条目（我们会逐渐删除它们）。 + +> **备注：** 此外，没有一个键是必须的；最好的做法（我们将强制执行此操作）是为每一个未弃用的键添加一个空列表，而不是省略它们。这也表明了没有值是刻意为之的。 + +### GroupData 的更新流程 + +应在影响侧边栏的更改的同一 PR 中更新此文件。这样，侧边栏始终是最新的。审查员不应合并不采用这种做法的 PR。 + +要测试你的更改，请检查 PR 中的文件的侧边栏是否正确显示所有条目。 + +`GroupData.json` 文件位于 GitHub 上的[这里](https://github.com/mdn/content/blob/main/files/jsondata/GroupData.json)。 + +## InterfaceData：记录接口继承关系 + +> **备注：** 我们希望将来能够根据 w3c/webref 提供的数据自动生成该文件。 + +`InterfaceData` 描述了接口的层次结构。它列出了继承关系。在过去，它还列出了每个接口实现的混入（mixin）。但是这种用法已被弃用，并且我们在更新 MDN 相关内容的同时从该文件中删除混入。 + +该继承数据用于构建 API 侧边栏和接口页面中的 `\{{InheritanceDiagram}}`。 + +### InterfaceData 的结构 + +`InterfaceData.json` 中的条目具有以下结构： + +```json +"Name_of_the_interface": { + "inh": "Name_of_the_parent_interface", + "impl": [] +} +``` + +> **备注：** 混入已被弃用，因此对于新增接口，`"impl"` 必须是空列表。 + +`"Name_of_the_parent_interface"` 的值不是列表，而必须是单个条目；不得列出任何不继承自其他接口的接口。 + +### InterfaceData 的更新流程 + +添加继承自其他接口的新接口的 PR 必须更新此文件。审查员不应合并不采用这种做法的 PR。 + +要测试你的更改，请检查 PR 中编辑的每个接口的侧边栏是否正确显示继承关系。 + +`InterfaceData.json` 文件位于 GitHub 上的[这里](https://github.com/mdn/content/blob/main/files/jsondata/InterfaceData.json)。 + +## SpecData：规范信息 + +> **警告：** `SpecData.json` 文件已不再维护。规范信息存储在 w3c/browser-spec 和 mdn/browser-compat-data 中列出的特性的 `spec_url` 键中。 + +`\{{SpecName}}` 和 `\{{Spec2}}` 宏使用 `SpecData.json` 文件。我们不再接受对 `SpecData.json` 文件的任何进一步的贡献；相反，要么尝试使用 `\{{Specifications}}` 宏插入一个规范表格，要么尝试硬编码直接指向规范的链接。请注意，大多数情况下，在*规范*部分之外提及或链接到规范表明 MDN 上未适当记录某些内容。 + +`SpecData.json` 文件位于 GitHub 上的[这里](https://github.com/mdn/content/blob/main/files/jsondata/SpecData.json)。 From cd1e1f53ac142d390d61417a45cd976cfa5ec11c Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Sun, 22 Oct 2023 23:51:14 +0900 Subject: [PATCH 002/126] [ko]: revise index.md for `learn/html/howto/use_data_attributes` (#16562) * [revise]: revise index.md for learn/html/howto/use_data_attributes * Update files/ko/learn/html/howto/use_data_attributes/index.md --------- Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com> --- .../html/howto/use_data_attributes/index.md | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/files/ko/learn/html/howto/use_data_attributes/index.md b/files/ko/learn/html/howto/use_data_attributes/index.md index 094ea268a0fc8f..42749d43cc6029 100644 --- a/files/ko/learn/html/howto/use_data_attributes/index.md +++ b/files/ko/learn/html/howto/use_data_attributes/index.md @@ -1,15 +1,17 @@ --- title: 데이터 속성 사용하기 slug: Learn/HTML/Howto/Use_data_attributes +l10n: + sourceCommit: 6aa664dc5ccb5edf0897f99ad5feb59325dff831 --- {{LearnSidebar}} -[HTML5](/ko/docs/Web/Guide/HTML/HTML5) 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. [`data-*` 속성](/ko/docs/Web/HTML/Global_attributes#dataset)은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. +HTML은 특정 요소와 연관되어야 하지만, 정의된 의미를 갖지 않는 데이터에 대한 확장성을 고려하여 설계되었습니다. [`data-*` 속성](/ko/docs/Web/HTML/Global_attributes#dataset)은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다. ## HTML 문법 -문법은 간단합니다. 어느 엘리멘트에나 `data-`로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 `data` 사용법이 있습니다: +문법은 간단합니다. 속성의 이름이 `data-`로 시작하는 모든 속성은 데이터 속성입니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다. 아래 `data` 사용법이 있습니다. ```html
``` -## JavaScript 에서 접근하기 +## JavaScript에서 접근하기 -[JavaScript](/ko/docs/Web/JavaScript) 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.: {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다. +[JavaScript](/ko/docs/Web/JavaScript)에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}}를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다. 예를 들어, {{domxref("DOMStringMap")}}은 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다. -`dataset` 객체를 통해 `data` 속성을 가져오기 위해서는 속성 이름의 `data-` 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) +`dataset` 객체를 통해 `data` 속성을 가져오기 위해선, `data-` 뒤의 속성 이름 부분을 사용해 속성을 가져옵니다(대시들은 {{Glossary("camel_case", "camel case")}}로 변환되는 것에 주의하세요). ```js -var article = document.getElementById("electriccars"); +const article = document.querySelector("#electric-cars"); +// 아래 코드도 작동합니다. +// const article = document.getElementById("electric-cars") article.dataset.columns; // "3" article.dataset.indexNumber; // "12314" @@ -37,9 +41,9 @@ article.dataset.parent; // "cars" 각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 `article.dataset.columns = 5`와 같이 설정하면 해당 속성을 `"5"`로 변경할 것입니다. -## CSS 에서 접근하기 +## CSS에서 접근하기 -데이터 속성은 순 HTML 속성이기 때문에 [CSS](/ko/docs/Web/CSS)에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 [생성된 content](/ko/docs/Web/CSS/content) 를 사용하면 됩니다.: +데이터 속성은 평문 HTML 속성이기 때문에 [CSS](/ko/docs/Web/CSS)에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 [`attr()`](/ko/docs/Web/CSS/attr) 함수의 [생성된 content](/ko/docs/Web/CSS/content) 를 사용하면 됩니다. ```css article::before { @@ -47,7 +51,7 @@ article::before { } ``` -CSS의 [속성 선택자](/ko/docs/Web/CSS/Attribute_selectors)도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.: +CSS의 [속성 선택자](/ko/docs/Web/CSS/Attribute_selectors)도 데이터에 따라 스타일을 변경하는 데 사용할 수 있습니다. ```css article[data-columns="3"] { @@ -58,24 +62,18 @@ article[data-columns="4"] { } ``` -[이 JSBin 예시](http://jsbin.com/ujiday/2/edit)에서 이들이 함께 작동하는 것을 볼 수 있습니다. +[JSBin 예제](http://jsbin.com/ujiday/2/edit)에서 함께 작동하는 것을 볼 수 있습니다. -데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 [이 screencast](http://www.youtube.com/watch?v=On_WyUB1gOk) 를 확인하세요. ([JSBin 예시](http://jsbin.com/atawaz/3/edit)). +데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS 선택자와 자바스크립트 접근을 이용해서, display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 [이 screencast](http://www.youtube.com/watch?v=On_WyUB1gOk)를 확인하세요([JSBin 예제](http://jsbin.com/atawaz/3/edit)). 데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다. ## 문제점 -보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다. - -고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 [`dataset`을 지원하지 않습니다](http://caniuse.com/#feat=dataset). IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 [데이터 속성 읽기의 성능](http://jsperf.com/data-dataset)은 저조합니다. - -하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다. - -Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다. +보여야 하고 접근 가능한 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 인덱싱하지 못할 수도 있습니다. ## 더 알아보기 -- This article is adapted from [Using data attributes in JavaScript and CSS on hacks.mozilla.org](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/). -- Custom attributes are also supported in SVG 2; see {{domxref("SVGElement.dataset")}} and {{SVGAttr("data-*")}} for more information. -- [How to use HTML5 data attributes](http://www.sitepoint.com/use-html5-data-attributes/) (Sitepoint) +- 이 글은 [hacks.mozilla.org에서 JavaScript 및 CSS의 데이터 속성 사용](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/)에서 발췌되었습니다. +- 사용자 정의 속성은 SVG 2에서도 지원됩니다. 자세한 내용은 {{domxref("SVGElement.dataset")}} 및 {{SVGAttr("data-*")}}를 참조하세요. +- Sitepoint의 [HTML5 데이터 속성 사용 방법](http://www.sitepoint.com/use-html5-data-attributes/) From b301b721f6631f4ea52e5e923e94a9c8efc37d90 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Oct 2023 21:52:41 +0900 Subject: [PATCH 003/126] =?UTF-8?q?2023/10/16=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=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 --- .../script/type/speculationrules/index.md | 212 ++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/ja/web/html/element/script/type/speculationrules/index.md diff --git a/files/ja/web/html/element/script/type/speculationrules/index.md b/files/ja/web/html/element/script/type/speculationrules/index.md new file mode 100644 index 00000000000000..a8d483ac351153 --- /dev/null +++ b/files/ja/web/html/element/script/type/speculationrules/index.md @@ -0,0 +1,212 @@ +--- +title: +``` + +> **メモ:** `src`, `async`, `nomodule`, `defer`, `crossorigin`, `integrity`, `referrerpolicy` の各属性は指定することができません。 + +### 例外 + +- `TypeError` + - : 投機ルール定義が有効な JSON オブジェクトではない場合。 + +## 解説 + +` +``` + +```html + +``` + +### 投機ルールの JSON 表現 + +JSON 構造は最上位のレベルに 1 つ以上のフィールドを格納し、それぞれが投機ルールを定義するアクションを表します。対応しているアクションは以下の通りです。 + +- `"prefetch"` {{optional_inline}} + - : 関連する文書レスポンス本体がダウンロードされ、それらの文書に移動したときのパフォーマンスが大幅に改善されるようにする、将来的なナビゲーションの可能性のあるルール。ページが参照するサブリソースはどれもダウンロードされないことに注意してください。 +- `"prerender"` {{optional_inline}} + - : 関連文書が完全にダウンロードされ、レンダリングされ、不可視のタブに読み込まれるべき、将来起こりうるナビゲーションのルール。これには、すべてのサブリソースを読み込むこと、すべての JavaScript を実行すること、さらにはサブリソースを読み込んで JavaScript によって開始されるデータ フェッチを実行することが含まれます。これらの文書に移動すると、移動は即座に行われ、大幅なパフォーマンスの向上につながります。 + +> **メモ:** 先読みと先読みを効果的に使用する方法の詳細については[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) のメインページを参照してください。 + +各アクションフィールドは配列を格納し、配列は 1 つ以上のオブジェクトを格納します。各オブジェクトには、URL と関連の引数の集合を定義する単一のルールが格納されます。 + +具体的には、各オブジェクトは以下のプロパティを格納することができます。 + +- `"source"` + - : ルールが適用される URL のソースを表す文字列。取りうる値は以下のとおりです。 + - `"list"` + - : URL は特定のリストから決まります。 +- `"urls"` + - : ルールを適用する URL の一覧を表す文字列の配列。これらは絶対 URL にも相対 URL にもなります。相対 URL は、文書のベース URL からの相対 URL （文書内のインライン URL の場合）あるいは外部リソース URL からの相対 URL （外部から取得した URL の場合）で解釈されます。 +- `"requires"` {{optional_inline}} + + - : ルールを解釈するブラウザーが持つ機能を表す文字列の配列で、 指定した URL にルールを適用する場合に利用できます。 + + > **警告:** 指定した条件を満たせないブラウザーでは、[投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) に対応していても、先読みは自動的に失敗します。 + + 取りうる値は次の通りです。 + + - `"anonymous-client-ip-when-cross-origin"` + - : `"prefetch"` のみ オリジン間先読みリクエストが発行された場合に、ユーザーエージェントがクライアントの IP アドレスをオリジンのサーバーから見えないようにできる場合にのみ、ルールが一致するように指定します。これがどのように動作するのかは、ブラウザー実装に依存します。例えば、次のようになります。 + - Chrome の実装では、 Google 自身が所有するプロキシーを使って IP アドレスを隠蔽しているため、既定値では Google が制御するリファラーに対してのみ動作します（この場合、出力先の URL を Google に送信することはさらなるプライバシー漏洩にはならないため）。 Google が所有していないサイトで使用する場合、これを含むルールは `chrome://settings/preloading` で "Enhanced preloading" をオンにしているユーザーにのみ一致します。 + - 他の Chromium ベースのブラウザーは、自分自身で解決策を提供する必要があります。対象とするすべてのブラウザーで十分にテストすることをお勧めします。 + - 将来の Safari 実装では、 [iCloud Private Relay](https://support.apple.com/ja/102602) のようなものを使用する可能性があります。 + - 将来の Firefox 実装では、[Mozilla VPN](https://www.mozilla.org/ja/products/vpn/) 製品をベースにしたものを使用するかもしれません。 + +- `"referrer_policy"` {{optional_inline}} + - : ルールで指定された URL をリクエストするときに使用する特定のリファラーポリシー文字列を表します - 使用可能な値については [`Referrer-Policy`](/ja/docs/Web/HTTP/Headers/Referrer-Policy) を参照してください。この目的は、参照するページが（既定で、または `Referrer-Policy` を使用して）既に保有しているポリシーよりも、投機的リクエストに特定の厳しいポリシーを設定することを許可することです。投機ルールで設定された緩いポリシーは、参照するページで設定された厳しいポリシーを上書きすることはありません。 + +> **メモ:** 投機ルールは ` +``` + +また、単一の HTML ファイルに複数の一連のルールを含めることも可能です。 + +```html + + +``` + +そして、単一の結果集合に複数のルールを設定することも可能です。 + +```js + +``` + +### 動的なルール挿入 + +下記は、投機ルールを検出し、対応している場合は、 JavaScript を介して動的に先行描画の投機ルールを追加する機能の例です。 + +```js +if ( + HTMLScriptElement.supports && + HTMLScriptElement.supports("speculationrules") +) { + const specScript = document.createElement("script"); + specScript.type = "speculationrules"; + const specRules = { + prerender: [ + { + source: "list", + urls: ["/next.html"], + }, + ], + }; + specScript.textContent = JSON.stringify(specRules); + console.log("added speculation rules to: next.html"); + document.body.append(specScript); +} +``` + +この[先行描画のでも](https://prerender-demos.glitch.me/)のページでは、その様子を見ることができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Prerender pages in Chrome for instant page navigations](https://developer.chrome.com/blog/prerender-pages/) on developer.chrome.com (2023) +- [投機的な読み込み](/ja/docs/Web/Performance/Speculative_loading) +- [投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) From f90d1aed45a93c3c02d2f9d14878e47b56873eba Mon Sep 17 00:00:00 2001 From: Hojin Choi Date: Mon, 23 Oct 2023 12:07:36 +0900 Subject: [PATCH 004/126] [ko] fix to markdown format and etc. (#16660) * [ko] fix to markdown format and etc. * change pre tags to "```" * revert html entity escaped strings to original symbol ("<" -> "<") * fix minor typos * translate one line * chore: update applying_styles_and_colors to sync with origin * chore: add sourceCommit metadata --------- Co-authored-by: Sungwoo Park --- .../applying_styles_and_colors/index.md | 192 ++++++++++++------ 1 file changed, 127 insertions(+), 65 deletions(-) diff --git a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 8de43c8f866a98..8a7547ce8e2738 100644 --- a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -1,11 +1,15 @@ --- title: 스타일과 색 적용하기 slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +l10n: + sourceCommit: 6e0d822711793e8672d2ebfeea779890525f7529 --- {{DefaultAPISidebar("Canvas API")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}} -[도형 그리기](/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes) 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다. +[도형 그리기](/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes) 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수 있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게 됩니다. + +> **참고:** 캔버스 속 내용은 스크린 리더를 사용하는 유저가 접근할 수 없습니다. 만약 캔버스가 순수히 꾸미는 용으로 사용하는 경우, `` 시작 태그에 `role="presentation"`을 넣어줘야 합니다. 그렇지 않다면 캔버스 요소에 설명하는 내용을 [`aria-label`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-label) 속성의 값으로 넣거나, 캔버스 태그 안에 대체 내용을 넣어야 합니다. 캔버스 속 내용은 DOM의 일부가 아니지만, 중첩 대체 내용은 일부가 될 수 있습니다. ## 색상 @@ -35,16 +39,20 @@ ctx.fillStyle = "rgba(255, 165, 0, 1)"; 이 예제에서 `for` 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 `i`와 `j`를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다. -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++){
-    for (var j = 0; j < 6; j++){
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ', 0)';
-      ctx.fillRect(j*25,i*25,25,25);
-    }
-  }
-}
+```js +function draw() { + var ctx = document.getElementById("canvas").getContext("2d"); + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.fillStyle = + "rgb(" + + Math.floor(255 - 42.5 * i) + + ", " + + Math.floor(255 - 42.5 * j) + + ", 0)"; + ctx.fillRect(j * 25, i * 25, 25, 25); +} +``` ```html hidden @@ -62,18 +70,24 @@ draw(); 이번 예제는 위에 나온 예제와 비슷하지만, `strokeStyle` 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 `arc()` 메소드를 사용합니다. -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ')';
+```js
+function draw() {
+  var ctx = document.getElementById("canvas").getContext("2d");
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.strokeStyle =
+        "rgb(0, " +
+        Math.floor(255 - 42.5 * i) +
+        ", " +
+        Math.floor(255 - 42.5 * j) +
+        ")";
       ctx.beginPath();
       ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
       ctx.stroke();
     }
   }
-}
+} +``` ```html hidden @@ -113,23 +127,23 @@ ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // 배경을 그린다 - ctx.fillStyle = '#FD0'; + ctx.fillStyle = "#FD0"; ctx.fillRect(0, 0, 75, 75); - ctx.fillStyle = '#6C0'; + ctx.fillStyle = "#6C0"; ctx.fillRect(75, 0, 75, 75); - ctx.fillStyle = '#09F'; + ctx.fillStyle = "#09F"; ctx.fillRect(0, 75, 75, 75); - ctx.fillStyle = '#F30'; + ctx.fillStyle = "#F30"; ctx.fillRect(75, 75, 75, 75); - ctx.fillStyle = '#FFF'; + ctx.fillStyle = "#FFF"; // 투명값을 설정한다 ctx.globalAlpha = 0.2; // 반투명한 원을 그린다 - for (var i = 0; i < 7; i++){ + for (var i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); @@ -153,23 +167,23 @@ draw(); ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // 배경을 그린다 - ctx.fillStyle = 'rgb(255,221,0)'; - ctx.fillRect(0,0,150,37.5); - ctx.fillStyle = 'rgb(102,204,0)'; - ctx.fillRect(0,37.5,150,37.5); - ctx.fillStyle = 'rgb(0,153,255)'; - ctx.fillRect(0,75,150,37.5); - ctx.fillStyle = 'rgb(255,51,0)'; - ctx.fillRect(0,112.5,150,37.5); + ctx.fillStyle = "rgb(255,221,0)"; + ctx.fillRect(0, 0, 150, 37.5); + ctx.fillStyle = "rgb(102,204,0)"; + ctx.fillRect(0, 37.5, 150, 37.5); + ctx.fillStyle = "rgb(0,153,255)"; + ctx.fillRect(0, 75, 150, 37.5); + ctx.fillStyle = "rgb(255,51,0)"; + ctx.fillRect(0, 112.5, 150, 37.5); // 반투명한 사각형을 그린다 - for (var i=0;i<10;i++){ - ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; - for (var j=0;j<4;j++){ - ctx.fillRect(5+i*14,5+j*37.5,14,27.5) + for (var i = 0; i < 10; i++) { + ctx.fillStyle = "rgba(255,255,255," + (i + 1) / 10 + ")"; + for (var j = 0; j < 4; j++) { + ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } } @@ -216,8 +230,8 @@ draw(); ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - for (var i = 0; i < 10; i++){ + var ctx = document.getElementById("canvas").getContext("2d"); + for (var i = 0; i < 10; i++) { ctx.lineWidth = 1 + i; ctx.beginPath(); ctx.moveTo(5 + i * 14, 5); @@ -270,11 +284,11 @@ draw(); ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineCap = ['butt','round','square']; + var ctx = document.getElementById("canvas").getContext("2d"); + var lineCap = ["butt", "round", "square"]; // 안내선을 그린다 - ctx.strokeStyle = '#09f'; + ctx.strokeStyle = "#09f"; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(140, 10); @@ -283,13 +297,13 @@ function draw() { ctx.stroke(); // 선을 그린다 - ctx.strokeStyle = 'black'; - for (var i=0;i<lineCap.length;i++){ + ctx.strokeStyle = "black"; + for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25 + i * 50, 10); - ctx.lineTo(25 + i * 50,140); + ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } } @@ -324,10 +338,10 @@ draw(); ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var lineJoin = ['round', 'bevel', 'miter']; + var ctx = document.getElementById("canvas").getContext("2d"); + var lineJoin = ["round", "bevel", "miter"]; ctx.lineWidth = 10; - for (var i=0;i<lineJoin.length;i++){ + for (var i = 0; i < lineJoin.length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i * 40); @@ -370,33 +384,33 @@ draw(); ```js function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); + var ctx = document.getElementById("canvas").getContext("2d"); // 캔버스를 비운다 - ctx.clearRect(0,0,150,150); + ctx.clearRect(0, 0, 150, 150); // 안내선을 그린다 - ctx.strokeStyle = '#09f'; - ctx.lineWidth = 2; - ctx.strokeRect(-5,50,160,50); + ctx.strokeStyle = "#09f"; + ctx.lineWidth = 2; + ctx.strokeRect(-5, 50, 160, 50); // 선 스타일을 설정한다 - ctx.strokeStyle = '#000'; + ctx.strokeStyle = "#000"; ctx.lineWidth = 10; // 입력 값을 검사한다 - if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { - ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + if (document.getElementById("miterLimit").value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById("miterLimit").value); } else { - alert('Value must be a positive number'); + alert("Value must be a positive number"); } // 선을 그린다 ctx.beginPath(); - ctx.moveTo(0,100); - for (i=0;i<24;i++){ - var dy = i%2==0 ? 25 : -25 ; - ctx.lineTo(Math.pow(i,1.5)*2,75+dy); + ctx.moveTo(0, 100); + for (i = 0; i < 24; i++) { + var dy = i % 2 == 0 ? 25 : -25; + ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); } ctx.stroke(); return false; @@ -591,6 +605,54 @@ draw(); {{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} +### `createConicGradient` 예제 + +이 예제에서는 서로 다른 두개의 원뿔 (conic) 그레이디언트를 정의할 것입니다. 원뿔 그레이디언트는 원을 만드는 원형 그레이디언트와 다르게 점을 기준으로 원을 그립니다. + +```js +function draw() { + const ctx = document.getElementById("canvas").getContext("2d"); + + // 그레이디언트를 생성한다 + const conicGrad1 = ctx.createConicGradient(2, 62, 75); + conicGrad1.addColorStop(0, "#A7D30C"); + conicGrad1.addColorStop(1, "#fff"); + + const conicGrad2 = ctx.createConicGradient(0, 187, 75); + // 도(degree)에서 라디안으로 변환하기 위해 값에 Math.PI/180 를 곱한다 + conicGrad2.addColorStop(0, "black"); + conicGrad2.addColorStop(0.25, "black"); + conicGrad2.addColorStop(0.25, "white"); + conicGrad2.addColorStop(0.5, "white"); + conicGrad2.addColorStop(0.5, "black"); + conicGrad2.addColorStop(0.75, "black"); + conicGrad2.addColorStop(0.75, "white"); + conicGrad2.addColorStop(1, "white"); + + // 도형을 그린다 + ctx.fillStyle = conicGrad1; + ctx.fillRect(12, 25, 100, 100); + ctx.fillStyle = conicGrad2; + ctx.fillRect(137, 25, 100, 100); +} +``` + +```html hidden + + 원뿔 그레이디언트 + +``` + +```js hidden +draw(); +``` + +첫 번째 그레이디언트는 첫 번째 직사각형의 중앙에 위치하고 시작할 때 녹색 정지점을 끝에서 흰색 정지점으로 이동합니다. 각도는 2 라디안에서 시작하는데, 이는 남동쪽을 가리키는 시작 / 끝선 이기에 눈에 띕니다. + +두 번쨰 그레이디언트는 두 번째 사각형의 중앙에 위치합니다. 이 그레이디언트는 회전할 때마다 검은색에서 흰색으로 번갈아 가며 여러 가지 색상을 표현합니다. 이는 체크 효과를 나타나게 됩니다. + +{{EmbedLiveSample("A_createConicGradient_example", "180", "180", "canvas_conicgrad.png")}} + ## 패턴(Patterns) 이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다. @@ -639,11 +701,11 @@ function draw() { } ``` -```html +```html hidden ``` -```js +```js hidden draw(); ``` @@ -714,7 +776,7 @@ draw(); - `evenodd` - : [even-odd winding rule](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule) 알고리즘. -In this example we are using the `evenodd` rule. +이 예제에서는 'evenodd' 규칙을 사용합니다. ```js function draw() { From 1d9933e96baee893c9596365a0184658d1601c50 Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Mon, 23 Oct 2023 15:24:23 +0800 Subject: [PATCH 005/126] zh-cn: init the translation of mathml intro (#16669) --- files/zh-cn/learn/mathml/index.md | 38 +++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 files/zh-cn/learn/mathml/index.md diff --git a/files/zh-cn/learn/mathml/index.md b/files/zh-cn/learn/mathml/index.md new file mode 100644 index 00000000000000..eb2c1ab6606c69 --- /dev/null +++ b/files/zh-cn/learn/mathml/index.md @@ -0,0 +1,38 @@ +--- +title: 使用 MathML 编写数学公式 +slug: Learn/MathML +--- + +{{LearnSidebar}} + +数学标记语言（Mathematical Markup Language）或 {{glossary("MathML")}} 是用于在网页中编写数学公式的标记语言，其支持分数、上下标、根号、矩阵、积分、级数等。尽管它最初被设计为独立的 XML 语言，但 MathML 通常嵌入在 {{Glossary('HTML')}} 文档中，并可视为 HTML 的扩展。 + +> **警告：** 实际上，MathML 内容是由[轻量级标记语言](https://zh.wikipedia.org/wiki/轻量级标记语言)（例如 [LaTeX](https://zh.wikipedia.org/wiki/LaTeX)）或[图形用户界面](https://zh.wikipedia.org/wiki/图形用户界面)生成的。如果你只需要在网页中集成数学公式，可以参考[编写 MathML](/zh-CN/docs/Web/MathML/Authoring) 页面上的提示。 + +> **标注：** +> +> #### 想成为前端开发人员吗？ +> +> 我们提供了一门课程，包含了你实现这个目标所需的所有基本信息。 +> +> [**开始学习**](/zh-CN/docs/Learn/Front-end_web_developer) + +## 前提 + +在尝试学习 MathML 之前，我们假设你已经具备一些基本的 [HTML](/zh-CN/docs/Learn/HTML) 和 [CSS](/zh-CN/docs/Learn/CSS) 知识。因此，强烈建议你首先熟悉这两种技术。请从以下模块开始： + +- [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) +- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML) +- [CSS 入门](/zh-CN/docs/Learn/CSS/First_steps) + +尽管所需的概念将根据需要进行解释，但对数学符号和 [TeX](https://zh.wikipedia.org/wiki/TeX) 渲染规则有一定的了解可能会对你有帮助。 + +## 模块 + +- [MathML 入门](/zh-CN/docs/Learn/MathML/First_steps) + - : MathML 是用于在网页中编写数学公式的标记语言。该模块将以比较轻松的方式开始你的 MathML 掌握之旅，介绍其工作原理、语法以及如何在 HTML 中开始使用它。 + +## 参见 + +- [MDN 上的 MathML](/zh-CN/docs/Web/MathML) + - : MathML 文档在 MDN 上的主要入口，你可以在此找到 MathML 语言所有特性的详细参考文档。想知道某个属性可以使用哪些值？这是一个很好的参考资料。 From a6becf78e84b5ec749d43b07a8e5179786971107 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Oct 2023 22:14:17 +0900 Subject: [PATCH 006/126] =?UTF-8?q?2023/02/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_hover/index.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/files/ja/web/css/_colon_hover/index.md b/files/ja/web/css/_colon_hover/index.md index 782e1903f14847..3a703787b85025 100644 --- a/files/ja/web/css/_colon_hover/index.md +++ b/files/ja/web/css/_colon_hover/index.md @@ -1,27 +1,26 @@ --- title: ":hover" slug: Web/CSS/:hover +l10n: + sourceCommit: c6dbc4ff96451887b908b46c8e70bcfec1c2c48c --- -{{ CSSRef }} +{{CSSRef}} -**`:hover`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) を要素の上でかざしたときにそうなります。 +**`:hover`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインター）を要素の上にかざしたときにそうなります。 -```css -/* 「ホバー」状態の 要素を選択します */ -a:hover { - color: orange; -} -``` +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-hover.html", "tabbed-shorter")}} -`:hover` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{ cssxref(":link") }}、{{ cssxref(":visited") }}、 {{ cssxref(":active") }}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:hover` の規則を `:link` と `:visited` の後、 `:active` の前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 +`:hover` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{ cssxref(":link") }}、{{ cssxref(":visited") }}、{{ cssxref(":active") }}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:hover` の規則を `:link` と `:visited` の後、 `:active` の前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 > **メモ:** `:hover` 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 `:hover` 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。 ## 構文 -``` -:hover +```css +:hover { + /* ... */ +} ``` ## 例 @@ -61,5 +60,5 @@ a:hover { ## 関連情報 -- [Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport](https://code.google.com/p/chromium/issues/detail?id=370155) -- [Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.](https://code.google.com/p/chromium/issues/detail?id=306581) +- [Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport](https://crbug.com/370155) +- [Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.](https://crbug.com/306581) From ace5991112492dc0dc3ce517ab5345a2d661da07 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 18 Oct 2023 22:19:37 +0900 Subject: [PATCH 007/126] =?UTF-8?q?2023/02/21=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_link/index.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/files/ja/web/css/_colon_link/index.md b/files/ja/web/css/_colon_link/index.md index cda5d45f4c5811..ef07400806a499 100644 --- a/files/ja/web/css/_colon_link/index.md +++ b/files/ja/web/css/_colon_link/index.md @@ -1,27 +1,26 @@ --- title: ":link" slug: Web/CSS/:link +l10n: + sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e --- -{{ CSSRef }} +{{CSSRef}} **`:link`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、まだ訪問されていない要素を表します。 {{HTMLElement("a")}} または {{HTMLElement("area")}} など、 `href` 属性を持つ未訪問のすべての要素を選択します。 -```css -/* 未訪問の をすべて選択します */ -a:link { - color: red; -} -``` +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-link.html", "tabbed-shorter")}} -`:link` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス （{{cssxref(":active")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるように、他のすべてのリンク関連規則の前に `:link` 規則を置いてください。 +`:link` および [`:visited`](/ja/docs/Web/CSS/:visited) 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（{{cssxref(":hover")}} または {{cssxref(":active")}}）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 `:link` ルールを他のすべてのリンク関連ルールの前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。 > **メモ:** 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。 ## 構文 -``` -:link +```css +:link { + /* ... */ +} ``` ## 例 From c9efb42044a524c7800c1960a00f5b2e49d0473c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Oct 2023 22:45:39 +0900 Subject: [PATCH 008/126] =?UTF-8?q?2023/02/21=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_visited/index.md | 25 ++++++++++++------------ 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/files/ja/web/css/_colon_visited/index.md b/files/ja/web/css/_colon_visited/index.md index 84b45aee034072..c432b354d8f5b6 100644 --- a/files/ja/web/css/_colon_visited/index.md +++ b/files/ja/web/css/_colon_visited/index.md @@ -1,37 +1,36 @@ --- title: ":visited" slug: Web/CSS/:visited +l10n: + sourceCommit: 5fea7c9593f5e4b4ef13ec65064acf1eabf01e4e --- {{CSSRef}} -**`:visited`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 +**`:visited`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーが訪問したことがあるリンクに適用されます。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 `:visited` 擬似クラスは `href` 属性を持つ {{htmlelement("a")}} と {{htmlelement("area")}} 要素にのみ適用されます。 -```css -/* 訪問済みの をすべて選択 */ -a:visited { - color: green; -} -``` +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-visited.html", "tabbed-shorter")}} -`:visited` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 _LVHA 順_、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 +`:visited` および、未訪問を表す [`:link`](/ja/docs/Web/CSS/:link) 擬似クラスで定義されたスタイルは、少なくとも同等の仕様を持つユーザー操作に関する擬似クラスで（{{cssxref(":hover")}} や {{cssxref(":active")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 `:visited` ルールを `:link` ルールの後、 `:hover` および `:active` ルールの前に置いてください。 _LVHA 順_、 `:link` — `:visited` — `:hover` — `:active` と定義されています。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。 -## スタイル適用の制約 +## プライバシー上の制約 プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。 - 利用できる CSS プロパティは、 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("text-decoration-color") }}, {{ cssxref("text-emphasis-color") }} です。 - 利用できる SVG 属性は {{SVGAttr("fill")}} と {{SVGAttr("stroke")}} です。 -- 利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の `:visited` 状態ではないものが代わりに使用されますが、アルファチャンネルが `0` であった場合は、 `:visited` で設定されたスタイルセットは全体的に無視されます。 +- 利用できるスタイルでもアルファチャンネルは無視されます。要素の `:visited` でない状態のアルファ成分が代わりに使用されます。Firefox でアルファ成分が `0` の場合、`:visited` で設定したスタイルは完全に無視されます。 - これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。 - [``](/ja/docs/Web/HTML/Element/link) 要素は `:visited` に一致することはありません。 -> **メモ:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/CSS/Privacy_and_the_:visited_selector)を参照してください。 +> **メモ:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)を参照してください。 ## 構文 -``` -visited +```css +:visited { + /* ... */ +} ``` ## 例 From 910a6453d7aabb28be20d6d7129f816077314fbe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Oct 2023 22:56:25 +0900 Subject: [PATCH 009/126] =?UTF-8?q?2023/02/21=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md index 0757a6cd0b79f3..668af74854c099 100644 --- a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.md @@ -1,11 +1,13 @@ --- title: プライバシーと :visited セレクター slug: Web/CSS/Privacy_and_the_:visited_selector +l10n: + sourceCommit: 9428e6f9ac2fd4166b5cf245fb674123209787ff --- -{{cssref}} +{{CSSRef}} -およそ 2010 年よりも前、 [CSS](/ja/docs/Web/CSS) の {{cssxref(":visited")}} セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは {{domxref("window.getComputedStyle")}} およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。 +およそ 2010 年よりも前、 [CSS](/ja/docs/Web/CSS) の {{ cssxref(":visited") }} セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは {{domxref("window.getComputedStyle")}} およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。 この問題を緩和するために、ブラウザーは訪問済みリンクから受け取ることができる情報量を制限されるようになりました。 @@ -14,21 +16,23 @@ slug: Web/CSS/Privacy_and_the_:visited_selector ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。 - `window.getComputedStyle` メソッドや、 {{ domxref("element.querySelector") }} などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。 -- `:visited + span` のような兄弟セレクターを使用した場合、隣接する要素 (この例では `span`) は、リンクが未訪問であるかのようにスタイル付けされます。 -- 稀なケースですが、入れ子になったリンク要素を使用していて、マッチしている要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であったかのようにレンダリングされます。 +- `:visited + span` のような兄弟セレクターを使用した場合、隣接する要素（この例では `span`）は、リンクが未訪問であるかのようにスタイル付けされます。 +- 稀なケースですが、入れ子になったリンク要素を使用していて、一致している要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であるかのようにレンダリングされます。 ## 訪問済みリンクスタイルの制限 -訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは次のプロパティだけです: +訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは以下のプロパティだけです。 -- {{cssxref("color")}} -- {{cssxref("background-color")}} -- {{cssxref("border-color")}} (およびそのサブプロパティ) -- {{cssxref("column-rule-color")}} -- {{cssxref("outline-color")}} +- {{ cssxref("color") }} +- {{ cssxref("background-color") }} +- {{ cssxref("border-color") }} （およびそのサブプロパティ） +- {{ cssxref("column-rule-color") }} +- {{ cssxref("outline-color") }} +- {{ cssxref("text-decoration-color") }} +- {{ cssxref("text-emphasis-color") }} - {{SVGAttr("fill")}} および {{SVGAttr("stroke")}} プロパティの色の部分 -さらに、訪問済みリンクにセットできるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、[`rgba()`]() や [`hsla()`]() のカラー値、もしくは [`transparent`](/ja/docs/Web/CSS/color_value#transparent) キーワードを使ってできた操作でした。 +さらに、訪問済みリンクに設定できるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、[`rgb()`](/ja/docs/Web/CSS/color_value/rgb) や [`hsl()`](/ja/docs/Web/CSS/color_value/hsl) のカラー値、もしくは [`transparent`](/ja/docs/Web/CSS/named-color#transparent) キーワードを使ってできた操作でした。 制限内でスタイルづけをする方法を、次の例で示します。 @@ -36,14 +40,14 @@ slug: Web/CSS/Privacy_and_the_:visited_selector :link { outline: 1px dotted blue; background-color: white; - /* The default value of background-color is `transparent`. You need to - specify a different value, otherwise changes on :visited won't apply. */ + /* background-color の既定値は `transparent` です。異なる値を指定しないと + :visited での変更が適用されません。 */ } :visited { outline-color: orange; /* オレンジのアウトライン */ background-color: green; /* グリーンの背景 */ - color: yellow; /* イエローのテキスト */ + color: yellow; /* 黄色のテキスト */ } ``` @@ -57,5 +61,5 @@ slug: Web/CSS/Privacy_and_the_:visited_selector ## 関連情報 - [CSS の :visited に行われるプライバシー対策](https://dev.mozilla.jp/2010/04/privacy-related-changes-coming-to-css-vistited/) on Mozilla Hacks ブログ翻訳 -- [Plugging the CSS History Leak](http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/) on the Mozilla Security Blog -- [Preventing attacks on a user's history through CSS :visited selectors](http://dbaron.org/mozilla/visited-privacy) +- [Plugging the CSS History Leak](https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/) on the Mozilla Security Blog +- [Preventing attacks on a user's history through CSS :visited selectors](https://dbaron.org/mozilla/visited-privacy) From 9ae564b194496f1e2540327b16a293700585746c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 12 Oct 2023 23:43:17 +0900 Subject: [PATCH 010/126] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/document/scroll_event/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/document/scroll_event/index.md b/files/ja/web/api/document/scroll_event/index.md index 41ab0c9659ea2d..1e2557f54e9c8f 100644 --- a/files/ja/web/api/document/scroll_event/index.md +++ b/files/ja/web/api/document/scroll_event/index.md @@ -1,8 +1,9 @@ --- title: "Document: scroll イベント" +short-title: scroll slug: Web/API/Document/scroll_event l10n: - sourceCommit: ad11fa09cfe07fbce82de0457daa8c5ac243b748 + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b --- {{APIRef}} From f987f00455b96460e5a17803ef38f033e31f38a5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 14 Oct 2023 19:26:47 +0900 Subject: [PATCH 011/126] =?UTF-8?q?2023/07/03=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/accessibility/html/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ja/learn/accessibility/html/index.md b/files/ja/learn/accessibility/html/index.md index d55a8092354ed0..4b53a7f53ac0f7 100644 --- a/files/ja/learn/accessibility/html/index.md +++ b/files/ja/learn/accessibility/html/index.md @@ -2,7 +2,7 @@ title: "HTML: アクセシビリティの基礎" slug: Learn/Accessibility/HTML l10n: - sourceCommit: 8e2641ebe076ab89299c77a51ece882de4ba5efb + sourceCommit: bb026bcb88b7f45374d602301b7b0db5a49ff303 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}} @@ -258,7 +258,7 @@ HTML の `