From 3360850c1dd13856560be7334891d2209b71f2e5 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Sat, 2 Nov 2024 12:29:32 +0800 Subject: [PATCH 001/316] [zh-CN]: add translation for Keyboard API (#24286) Co-authored-by: A1lo --- files/zh-cn/web/api/keyboard_api/index.md | 74 +++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/zh-cn/web/api/keyboard_api/index.md diff --git a/files/zh-cn/web/api/keyboard_api/index.md b/files/zh-cn/web/api/keyboard_api/index.md new file mode 100644 index 00000000000000..0aa1e9690fd936 --- /dev/null +++ b/files/zh-cn/web/api/keyboard_api/index.md @@ -0,0 +1,74 @@ +--- +title: 键盘 API +slug: Web/API/Keyboard_API +l10n: + sourceCommit: 722a5edf794b8fb7a379cdf79729fd913b0b264f +--- + +{{SeeCompatTable}}{{DefaultAPISidebar("Keyboard API")}} + +键盘 API（Keyboard API）提供了使用连接到运行浏览器的设备的物理键盘的方法。 + +它提供了多种功能。*键盘映射*提供了一个接口，用于检索键盘上特定物理键生成的字符串，以便向用户正确标识该键。*键盘锁定*使网页能够捕获通常由用户代理或底层操作系统保留的键。Keyboard API 的预期用途是提供全屏沉浸式体验的 Web 应用程序，例如游戏或远程访问应用程序。 + +## 概念和用法 + +### 键盘映射 + +在物理键盘上，`code` 属性包含所按下按键的物理位置，`key` 属性包含按下键盘上该物理位置的按键所生成的字符串。`key` 值考虑了键盘的区域设置（例如“en-US”）、布局（例如“QWERTY”）和修饰键状态（Shift、Control 等）。过去没有办法检索这些信息。 + +键盘映射 API 提供了一种通过 {{domxref('Keyboard')}} 接口和 {{domxref('KeyboardLayoutMap')}} 接口检索特定按键所生成的字符串的方法。可以通过 {{domxref('navigator.keyboard')}} 属性访问 {{domxref('Keyboard')}} 接口。{{domxref('Keyboard')}} 接口提供 {{domxref('Keyboard.getLayoutMap')}} 方法，该方法返回一个 promise，其兑现一个 {{domxref('KeyboardLayoutMap')}} 对象，该对象包含用于将代码转换为键的成员。有效代码值列表可在 [UI 事件 KeyboardEvent 代码值](https://w3c.github.io/uievents-code/)规范的[写入系统键](https://w3c.github.io/uievents-code/#key-alphanumeric-writing-system)部分中找到。 + +以下示例演示如何获取与英语 QWERTY 键盘上标记为 W 的键相关联的位置特定或布局特定字符串。 + +```js +if (navigator.keyboard) { + const keyboard = navigator.keyboard; + keyboard.getLayoutMap().then((keyboardLayoutMap) => { + const upKey = keyboardLayoutMap.get("KeyW"); + window.alert(`按 ${upKey} 向上移动。`); + }); +} else { + // 做点别的事。 +} +``` + +### 键盘锁定 + +丰富的交互式网页、游戏和远程流媒体体验通常需要在全屏模式下访问特殊键和键盘快捷键。此类键/键组合的示例包括 Escape、Alt+Tab 和 Ctrl+N。这些键和键组合通常由用户代理或底层操作系统捕获，如下例所示。 + +要捕获 W、A、S 和 D 键，请使用包含每个键的键代码属性值的列表调用 `lock()`： + +```js +navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]); +``` + +无论按键时使用哪种修饰符，此操作都会捕获这些键。假设采用标准的美国 QWERTY 布局，注册 `KeyW` 可确保 W、Shift+W、Control+W、Control+Shift+W 以及所有其他带有 W 的键修饰符组合都发送到应用。这同样适用于 `KeyA`、`KeyS` 和 `KeyD`。 + +### 写入系统键 + +传递给 {{domxref('Keyboard.lock')}} 的代码和 {{domxref('KeyboardLayoutMap')}} 接口的各种方法称为“写入系统键”。 + +“写入系统键”在 [UI 事件 KeyboardEvent 代码值](https://w3c.github.io/uievents-code/)规范的[写入系统键](https://w3c.github.io/uievents-code/#key-alphanumeric-writing-system)部分中定义，因为物理键会根据当前语言环境和键盘布局改变含义。这些键如下所示。所有标准键盘上都有蓝色键，而绿色键仅在某些键盘上可用。 + +![按照 UI 事件 KeyboardEvent 代码值规范的定义写入系统键。](writing-system-keys.png) + +## 接口 + +- {{domxref('Keyboard')}} {{experimental_inline}} + - : 提供检索键盘布局图和从物理键盘切换捕获按键的功能。 +- {{domxref('KeyboardLayoutMap')}} {{experimental_inline}} + - : 一个类 map 的对象，具有检索与特定物理键关联的字符串的功能。 + +### 其他接口的扩展 + +- {{domxref('navigator.keyboard')}} {{ReadOnlyInline}} {{experimental_inline}} + - : 返回一个 {{domxref('Keyboard')}} 对象，该对象提供对检索键盘布局图和从物理键盘切换按键捕获的功能的访问。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} From d8988a4501e0af8c2ac4661c93a01f1e9a583f47 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Tue, 29 Oct 2024 19:29:03 +0900 Subject: [PATCH 002/316] Improve TouchList --- files/ja/web/api/touchlist/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/api/touchlist/index.md b/files/ja/web/api/touchlist/index.md index b5e82b333a4ef3..ac20ffa4fb75de 100644 --- a/files/ja/web/api/touchlist/index.md +++ b/files/ja/web/api/touchlist/index.md @@ -2,15 +2,16 @@ title: TouchList slug: Web/API/TouchList l10n: - sourceCommit: d414c502f3cc1c08d2fb043e98cda4a65621ff08 + sourceCommit: cfa628aedb53a83b315943ef19fa6c73298fb7d5 --- {{APIRef("Touch Events")}} **`TouchList`** インターフェイスは、タッチ面上の接触点のリストを表します。例えば、ユーザーがタッチ面（画面やトラックパッドなど）を 3 本指で操作している場合、対応する `TouchList` オブジェクトは 1 本の指あたり 1 つの {{domxref("Touch")}} オブジェクトを持ち、全部で 3 項目になります。 -> [!NOTE] -> このインターフェイスは[変更不可能なリストを作成しようとするもの](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)で、すでに使用しているコードを壊さないために対応しているだけです。現代の API では、代わりに ECMAScript の配列型をラップした型を使用しているので、ECMAScript の配列のように扱うことができ、同時にその使用方法に追加の意味づけをすることができます（例えば、アイテムを読み取り専用にする）。 +このインターフェイスは[変更不可能なリストを作成しようとしたもの](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)で、すでに使用しているコードを壊さないために対応しているだけです。現代の API では、JavaScript の[配列](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)をベースにした型でリストを表現しています。このことにより、配列のメソッドの多くを利用可能にし、同時にその使用方法に追加の意味づけをすることができます (例えば、アイテムを読み取り専用にする)。 + +この歴史的な理由は、開発者が `TouchList` を避けるべきということではありません。開発者は `TouchList` のオブジェクトをを自分で作成するのではなく、{{domxref("TouchEvent.targetTouches")}} などの API から取得するでしょう。そして、これらの API は非推奨になっていません。ただし、本物の配列との意味論的な違いには注意するべきです。 ## インスタンスプロパティ From d5ac4a4971488ddfcf0b8a709403e81653b1e213 Mon Sep 17 00:00:00 2001 From: Arthur Sedlukha Date: Mon, 4 Nov 2024 00:02:25 +0300 Subject: [PATCH 003/316] [ru]: sync Doctype (#24269) * docs: sync Doctype * [ru]: sync * [ru] improve 'Glossary/Doctype' translation --------- Co-authored-by: Leonid Vinogradov --- files/ru/glossary/doctype/index.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/files/ru/glossary/doctype/index.md b/files/ru/glossary/doctype/index.md index e599b99fa6d289..eb89221dc429f5 100644 --- a/files/ru/glossary/doctype/index.md +++ b/files/ru/glossary/doctype/index.md @@ -1,19 +1,18 @@ --- -title: Doctype +title: Тип документа slug: Glossary/Doctype +l10n: + sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1 --- {{GlossarySidebar}} -В {{Glossary("HTML")}} объявление типа документа тегом "``" - обязательная преамбула, расположенная в верхней части документа. Единственное предназначение тега - не допустить переключение {{Glossary("browser","браузера")}} в так называемый режим совместимости (["quirks mode"](/ru/docs/Quirks_Mode_and_Standards_Mode)) во время рендеринга документа; то есть, тег "``" гарантирует, что браузер с максимальными усилиями будет следовать соответствующей спецификации, а не использовать другой тип рендеринга, несовместимый с некоторыми спецификациями. +В {{Glossary("HTML")}} необходимо объявлять **тип документа** с помощью `` в верхней части документа. Единственное цель этого — не допустить переключение {{Glossary("browser", "браузера")}} в так называемый режим совместимости «([quirks mode](/ru/docs/Quirks_Mode_and_Standards_Mode))» во время рендеринга документа. То есть указание типа документа с помощью `` гарантирует, что браузер будет следовать соответствующей спецификации, а не использовать другой режим отображения, несовместимый с некоторыми спецификациями. -## Смотрите также - -### Основная информация +Объявление doctype не зависит от регистра. В примерах кода на MDN принято использовать строчные буквы, но также часто можно встретить вариант записи ``. -- [Definition of the DOCTYPE in the HTML specification](https://html.spec.whatwg.org/multipage/syntax.html#the-doctype) -- [Quirks Mode and Standards Mode](/ru/docs/Quirks_Mode_and_Standards_Mode) - -### Техническая документация +## Смотрите также -- [Document.doctype](/ru/docs/Web/API/Document/doctype), a JavaScript method that returns the doctype +- [Определение DOCTYPE в спецификации HTML](https://html.spec.whatwg.org/multipage/syntax.html#the-doctype) +- [Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)](/ru/docs/Quirks_Mode_and_Standards_Mode) +- [Document.doctype](/ru/docs/Web/API/Document/doctype), метод JavaScript, возвращающий тип документа From ec629bb99cb4d40d15f3d9e23a735dd632fef8f3 Mon Sep 17 00:00:00 2001 From: Paul Date: Sun, 3 Nov 2024 20:30:21 -0500 Subject: [PATCH 004/316] fix[es]: spelling corrections in ES (Spanish) import.md (#24260) --- .../web/javascript/reference/statements/import/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/es/web/javascript/reference/statements/import/index.md b/files/es/web/javascript/reference/statements/import/index.md index abd8462a5deeb0..ee2049f54c493f 100644 --- a/files/es/web/javascript/reference/statements/import/index.md +++ b/files/es/web/javascript/reference/statements/import/index.md @@ -47,7 +47,7 @@ Esto inserta `myModule` en el ámbito actual, que contiene todos los elementos e import * as myModule from "/modules/my-module.js"; ``` -Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembre exportado llamado `doAllTheAmazingThings()`, habría que invocarlo de la siguiente manera: +Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembro exportado llamado `doAllTheAmazingThings()`, habría que invocarlo de la siguiente manera: ```js myModule.doAllTheAmazingThings(); @@ -69,7 +69,7 @@ Esto inserta `foo` y `bar` en el ámbito actual. import { foo, bar } from "my-module.js"; ``` -### Importa un miembre con un alias mas conveniente +### Importa un miembro con un alias más conveniente Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta `shortName` en el ámbito actual. @@ -88,9 +88,9 @@ import { } from "/modules/my-module.js"; ``` -### Importa un módulo entero para efectos secundarios sólamente +### Importa un módulo entero para efectos secundarios solamente -Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor. +Importa un módulo entero para efectos secundarios solamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor. ```js import "/modules/my-module.js"; From d66aceeab01c29ec2a6aa2732d50a5a863a432fe Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:53:16 +0000 Subject: [PATCH 005/316] Bump ora from 8.1.0 to 8.1.1 (#24342) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b955f8b1e54ebb..8fac65e216bc99 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "markdownlint-cli2": "0.14.0", "markdownlint-rule-search-replace": "1.2.0", "mdast-util-from-markdown": "^2.0.2", - "ora": "^8.1.0", + "ora": "^8.1.1", "prettier": "3.3.3", "unist-util-visit": "^5.0.0", "yargs": "^17.7.2" diff --git a/yarn.lock b/yarn.lock index 21cc4c1b505106..c334c9560678dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -921,10 +921,10 @@ onetime@^7.0.0: dependencies: mimic-function "^5.0.0" -ora@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/ora/-/ora-8.1.0.tgz#c3db2f9f83a2bec9e8ab71fe3b9ae234d65ca3a8" - integrity sha512-GQEkNkH/GHOhPFXcqZs3IDahXEQcQxsSjEkK4KvEEST4t7eNzoMjxTzef+EZ+JluDEV+Raoi3WQ2CflnRdSVnQ== +ora@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/ora/-/ora-8.1.1.tgz#8efc8865e44c87e4b55468a47e80a03e678b0e54" + integrity sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw== dependencies: chalk "^5.3.0" cli-cursor "^5.0.0" From c2e37886b82ca169418ac038db9c208a2895d866 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=9C=E8=8D=AF=E5=90=9B?= <99505726+cnbilinyj@users.noreply.github.com> Date: Mon, 4 Nov 2024 20:10:56 +0800 Subject: [PATCH 006/316] zh-cn: init the translation of `Document.children` (#24177) Co-authored-by: A1lo Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../zh-cn/web/api/document/children/index.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 files/zh-cn/web/api/document/children/index.md diff --git a/files/zh-cn/web/api/document/children/index.md b/files/zh-cn/web/api/document/children/index.md new file mode 100644 index 00000000000000..886c10c413c8b2 --- /dev/null +++ b/files/zh-cn/web/api/document/children/index.md @@ -0,0 +1,43 @@ +--- +title: Document：children 属性 +slug: Web/API/Document/children +l10n: + sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b +--- + +{{ APIRef("DOM") }} + +**`children`** 只读属性返回一个实时的 {{domxref("HTMLCollection")}}，其中包含对调用该属性的文档的所有子{{domxref("Element", "元素", "", 1)}}。 + +对于 HTML 文档，这通常只有根 `` 元素。 + +请参见 {{domxref("Element.children")}} 以获取文档中具体 HTML 元素的子元素。 + +## 值 + +一个 {{ domxref("HTMLCollection") }}，它是当前文档子 DOM 元素的一个实时、有序集合。你可以通过对集合使用 {{domxref("HTMLCollection.item()", "item()")}} 方法，或者使用 JavaScript 数组风格的表示法来访问集合中的单个子节点。 + +如果文档没有元素子节点，则 `children` 是一个空列表，其 `length` 为 `0`。 + +## 示例 + +```js +document.children; +// HTMLCollection [] +// 通常只包含根 元素，即文档唯一的直接子元素 +``` + +请参见 {{domxref("Element.children")}} 以获取文档中具体 HTML 元素的子元素。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Element.children")}} +- {{domxref("Node.childNodes")}} From 26431b7befdb555d53ce48e0596458f0a49d6db8 Mon Sep 17 00:00:00 2001 From: Tsukasa OI Date: Fri, 1 Nov 2024 05:34:44 +0000 Subject: [PATCH 007/316] ja: Fix translation of "fangsong" (font-family) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit font-family の総称フォントファミリーにおける値 "fangsong" の説明を改訳。 English: Song (font style) Japanese: 明朝体 Simplified Chinese: 宋体 PRC 由来の通称 (宋体 = Song) は実態と異なり、実際の宋代の書風より 明代のスタイル (広義) に由来する部分が大きい。 日本語でいう「明朝体」に相当するため、その対応を重視して翻訳。 English: Kai (font style) Japanese: 楷書体 Simplified Chinese: 楷体 翻訳に関する特記事項は無し。 English: Fangsong (or Imitation Song; font style) Japanese: 宋朝体 (or 仿宋体) Simplified Chinese: 仿宋体 紛らわしいが、こちら (中日逐語訳風: 宋 (代) に倣う書体) は現実を反映する。 特記事項として、原文の文章 (説明部) そのものではなく、値の名前である fangsong (「仿宋」の中国語読みに由来) を文章に新しく挿入し、翻訳している。 これは、「宋朝体」という対応する日本語がある一方で、 説明と CSS 値の名称だけではどの種類の書体か分かりづらいため。 --- files/ja/web/css/font-family/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/font-family/index.md b/files/ja/web/css/font-family/index.md index a61e4d18807498..e04406cc2d7036 100644 --- a/files/ja/web/css/font-family/index.md +++ b/files/ja/web/css/font-family/index.md @@ -107,7 +107,7 @@ font-family: "Gill Sans Extrabold", sans-serif; - `emoji` - : 絵文字を表示するために特別にデザインされたフォントです。 - `fangsong` - - : セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。 + - : セリフ風の明朝体と手書き風の楷書体との間にある中国語の文字の特定のスタイル (宋朝体) です。このスタイルは政府文書によく使用されます。 ### 有効なファミリー名 From 6be6d93acf0d7e5e1f13ad6ec9252552af4f8951 Mon Sep 17 00:00:00 2001 From: Mario Ferrero <47794126+mariofdezzz@users.noreply.github.com> Date: Mon, 4 Nov 2024 15:38:43 +0000 Subject: [PATCH 008/316] missing page Intl/DateTimeFormat [es] (#24270) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * missing page Intl/DateTimeFormat [es] * fix path error trailing space * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/es/web/javascript/reference/global_objects/intl/datetimeformat/index.md --------- Co-authored-by: Juan Vásquez Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../intl/datetimeformat/index.md | 188 ++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 files/es/web/javascript/reference/global_objects/intl/datetimeformat/index.md diff --git a/files/es/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/es/web/javascript/reference/global_objects/intl/datetimeformat/index.md new file mode 100644 index 00000000000000..5ce97040a5d9c3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -0,0 +1,188 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +l10n: + sourceCommit: c420b9b3126451f53d112afe33e007d6efdb605d +--- + +{{JSRef}} + +El objeto **`Intl.DateTimeFormat`** permite el formateo de fechas y horas teniendo en cuenta las peculiaridades de cada idioma. + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}} + +## Constructor + +- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}} + - : Crea un nuevo objeto `Intl.DateTimeFormat`. + +## Métodos estáticos + +- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}} + - : Devuelve un array que contiene aquellos locales proporcionados que son compatibles sin tener que recurrir al local predeterminado del entorno de ejecución. + +## Propiedades de instancia + +Estas propiedades están definidas en `Intl.DateTimeFormat.prototype` y son compartidas por todas las instancias de `Intl.DateTimeFormat`. + +- {{jsxref("Object/constructor", "Intl.DateTimeFormat.prototype.constructor")}} + - : La función constructora que creó el objeto de instancia. Para instancias de `Intl.DateTimeFormat`, el valor inicial es el constructor {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat")}}. +- `Intl.DateTimeFormat.prototype[Symbol.toStringTag]` + - : El valor inicial de la propiedad [`[Symbol.toStringTag]`](/es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) es la cadena `"Intl.DateTimeFormat"`. Esta propiedad se usa en {{jsxref("Object.prototype.toString()")}}. + +## Métodos de instancia + +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} + - : Función getter que formatea una fecha según el idioma y las opciones de formato de este objeto `DateTimeFormat`. +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} + - : Este método recibe dos [Fechas](/es/docs/Web/JavaScript/Reference/Global_Objects/Date) y formatea el rango de fechas de la manera más concisa posible según el idioma y las opciones proporcionadas al instanciar `DateTimeFormat`. +- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} + - : Este método recibe dos [Fechas](/es/docs/Web/JavaScript/Reference/Global_Objects/Date) y devuelve un Array de objetos que contienen los tokens específicos del idioma que representan cada parte del rango de fechas formateado. +- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}} + - : Devuelve un {{jsxref("Array")}} de objetos que representan la cadena de fecha en partes, que se pueden usar para un formato personalizado sensible al idioma. +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}} + - : Devuelve un nuevo objeto con propiedades que reflejan el idioma y las opciones de formato calculadas durante la inicialización del objeto. + +## Ejemplos + +### Uso de DateTimeFormat + +En un uso básico sin especificar un idioma, `DateTimeFormat` utiliza el idioma predeterminado y las opciones predeterminadas. + +```js +const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// toLocaleString sin argumentos depende de la implementación, +// el idioma predeterminado y la zona horaria predeterminada +console.log(new Intl.DateTimeFormat().format(date)); +// "20/12/2012" si se ejecuta con el idioma es-ES (español) y en la zona horaria Europe/Madrid (UTC+0100) +``` + +### Uso de idiomas + +Este ejemplo muestra algunas de las variaciones en los formatos de fecha y hora localizados. Para obtener el formato del idioma utilizado en la interfaz de usuario de tu aplicación, asegúrate de especificar ese idioma (y posiblemente algunos idiomas de respaldo) usando el argumento `locales`: + +```js +const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// Los resultados a continuación usan la zona horaria de Europe/Madrid (UTC+0100) + +// El inglés de EE. UU. usa el orden mes-día-año +console.log(new Intl.DateTimeFormat("en-US").format(date)); +// "12/20/2012" + +// El inglés británico usa el orden día-mes-año +console.log(new Intl.DateTimeFormat("en-GB").format(date)); +// "20/12/2012" + +// El coreano usa el orden año-mes-día +console.log(new Intl.DateTimeFormat("ko-KR").format(date)); +// "2012. 12. 20." + +// El árabe en la mayoría de los países de habla árabe usa dígitos árabes reales +console.log(new Intl.DateTimeFormat("ar-EG").format(date)); +// "٢٠‏/١٢‏/٢٠١٢" + +// Para el japonés, las aplicaciones pueden querer usar el calendario japonés, +// donde 2012 fue el año 24 de la era Heisei +console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date)); +// "H24/12/20" + +// Cuando se solicita un idioma que puede no ser compatible, como +// Balinés, incluye un idioma de respaldo, en este caso indonesio +console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date)); +// "20/12/2012" +``` + +### Uso de opciones + +Los formatos de fecha y hora se pueden personalizar utilizando el argumento `options`: + +```js +const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)); + +// solicita un día de la semana junto con una fecha larga +let options = { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", +}; +console.log(new Intl.DateTimeFormat("de-DE", options).format(date)); +// "Donnerstag, 20. Dezember 2012" + +// una aplicación puede querer usar UTC y hacer que eso sea visible +options.timeZone = "UTC"; +options.timeZoneName = "short"; +console.log(new Intl.DateTimeFormat("en-US", options).format(date)); +// "Thursday, December 20, 2012 at UTC" + +// a veces quieres ser más preciso +options = { + hour: "numeric", + minute: "numeric", + second: "numeric", + timeZone: "Australia/Sydney", + timeZoneName: "short", +}; +console.log(new Intl.DateTimeFormat("en-AU", options).format(date)); +// "2:00:00 pm AEDT" + +// a veces quieres ser muy preciso +options.fractionalSecondDigits = 3; // número de dígitos para la fracción de segundos +console.log(new Intl.DateTimeFormat("en-AU", options).format(date)); +// "2:00:00.200 pm AEDT" + +// a veces incluso EE. UU. necesita un formato de 24 horas +options = { + year: "numeric", + month: "numeric", + day: "numeric", + hour: "numeric", + minute: "numeric", + second: "numeric", + hour12: false, + timeZone: "America/Los_Angeles", +}; +console.log(new Intl.DateTimeFormat("en-US", options).format(date)); +// "12/19/2012, 19:00:00" + +// para especificar opciones pero usar el idioma predeterminado del navegador, usa undefined +console.log(new Intl.DateTimeFormat(undefined, options).format(date)); +// "19/12/2012, 19:00:00" + +// a veces es útil incluir el período del día +options = { hour: "numeric", dayPeriod: "short" }; +console.log(new Intl.DateTimeFormat("en-US", options).format(date)); +// 3 at night +``` + +El calendario y los formatos de numeración usados también se pueden establecer independientemente a través de argumentos de `options`: + +```js +const options = { calendar: "chinese", numberingSystem: "arab" }; +const dateFormat = new Intl.DateTimeFormat(undefined, options); +const usedOptions = dateFormat.resolvedOptions(); + +console.log(usedOptions.calendar); +// "chinese" + +console.log(usedOptions.numberingSystem); +// "arab" + +console.log(usedOptions.timeZone); +// "Europe/Madrid" (la zona horaria predeterminada del usuario) +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con los navegadores + +{{Compat}} + +## Véase también + +- [Polyfill de `Intl.DateTimeFormat` en FormatJS](https://formatjs.github.io/docs/polyfills/intl-datetimeformat/) +- {{jsxref("Intl")}} From ac31459d4e785e96f8d30828b35f8fad38a48ef4 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:57:47 +0800 Subject: [PATCH 009/316] [zh-cn] update 'styling tables' (#24317) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: A1lo --- .../building_blocks/styling_tables/index.md | 137 +++++++++--------- 1 file changed, 68 insertions(+), 69 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md index a49f923745b7d5..f5c76c13789857 100644 --- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.md +++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.md @@ -1,36 +1,35 @@ --- title: 样式化表格 slug: Learn/CSS/Building_blocks/Styling_tables +l10n: + sourceCommit: 75326725db2daa924618e58ae31a43345c7a16dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Advanced_styling_effects", "Learn/CSS/Building_blocks")}} -设计一个 HTML 表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使 HTML 表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。 +为 HTML 表格设计样式并不是世界上最光彩的工作，但有时我们不得不这么做。本文将介绍如何让 HTML 表格看起来更美观，并重点介绍一些具体的表格样式设计技巧。 - +
- +
前提： - HTML 基础 (学习 + HTML 基础（学习 Introduction to HTML), HTML 表格 (见 HTML 表格模块 (TBD))，了解 CSS 工作原理 (study - Introduction to CSS.) + >HTML 简介），具有 HTML 表格基础，理解 CSS 工作原理（学习 CSS 第一步）。
目标：学习如何有效地对 HTML 表格进行样式化。学习如何有效地设计 HTML 表格样式。
## 一个典型的 HTML 表格 -让我们从一个典型的 HTML 表格开始。恩，我说典型——大多数 HTML 表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的 +让我们从一个典型的 HTML 表格开始——“典型”的意思是说，大多数 HTML 表格都是关于鞋子、天气或员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记如下： ```html @@ -59,7 +58,7 @@ slug: Learn/CSS/Building_blocks/Styling_tables - ... some rows removed for brevity + @@ -77,30 +76,30 @@ slug: Learn/CSS/Building_blocks/Styling_tables
London Calling
The Stranglers
``` -由于[`scope`](/zh-CN/docs/Web/HTML/Element/th#scope)、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}}等特性，表格被很好地标记了，易于使用，并且易于访问，不幸的是，它在屏幕上呈现时看起来不太好（见它的预览版 [punk-bands-unstyled.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html)）： +由于使用了 [`scope`](/zh-CN/docs/Web/HTML/Element/th#scope)、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} 等特性，该表格标记得很好，易于风格化和访问。遗憾的是，在屏幕上呈现出来的效果并不好（请在 [punk-bands-unstyled.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html) 上查看实时效果）： -![](table-unstyled.png) +![一个显示英国著名朋克乐队的表格，没有添加样式](table-unstyled.png) -它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些 CSS 来解决这个问题。 +仅使用默认的浏览器样式，它看起来很拥挤，难以阅读，而且很无聊。我们需要使用 CSS 来解决这个问题。 -## 自主学习：样式化我们的表格 +## 为表格添加样式 -在这个自主学习部分中，我们将一起来样式化我们的表格。 +让我们一起来为我们的表格示例添加样式。 -1. 首先，复制[实例标记](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-unstyled.html)到本地，下载这两个图像 ([noise](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/noise.png)和 [leopardskin](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/leopardskin.jpg))，然后将三个结果文件放在本地计算机的某个工作目录中。 -2. 接下来，创建一个名为`style.css`的新文件并将其保存在与其他文件相同的目录中。 -3. 将 CSS 链接到 HTML 中，将下面的 HTML 代码放到 HTML 的{{htmlelement("head")}}中： +1. 首先，复制[实例标记](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-unstyled.html)到本地，下载这两个图像（[noise](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/noise.png) 和 [leopardskin](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/leopardskin.jpg)），然后将三个文件放在本地计算机的某个工作目录中。 +2. 接下来，创建一个名为 `style.css` 的新文件，并将其保存在与其他文件相同的目录中。 +3. 将 CSS 链接到 HTML 中，将下面的 HTML 代码放到 HTML 的 {{htmlelement("head")}} 中： -```html - -``` + ```html + + ``` ### 间距和布局 我们需要做的第一件事是整理出空间/布局——默认的表格样式是如此的拥挤！要做到这一点，请将以下 CSS 添加到你的 `style.css` 文件： ```css -/* spacing */ +/* 间距 */ table { table-layout: fixed; @@ -131,27 +130,27 @@ td { } ``` -需要注意的最重要的部分如下： +最重要的部分如下： -- 在你的表上，给{{cssxref("table-layout")}}属性设置一个为`fixed`的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 `table-layout: fixed`，你可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了`thead th:nth-child(n)` 选择了四个不同的标题 ({{cssxref(":nth-child")}}) 选择器（“选择第 n 个子元素，它是一个顺序排列的{{htmlelement("th")}}元素，且其父元素是{{htmlelement("thead")}}元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier 在[Fixed Table Layouts](https://css-tricks.com/fixing-tables-long-strings/)中更详细地讨论了这一技术。 +- 在你的表格上，给 {{cssxref("table-layout")}} 属性设置 `fixed` 值通常是一个好主意，因为它使表格的行为在默认情况下更可预测。通常情况下，表格列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 `table-layout: fixed`，你可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。因此，我们使用 `thead th:nth-child(n)`（{{cssxref(":nth-child")}}）选择器，选择了 {{htmlelement("thead")}} 元素中 {{htmlelement("th")}} 的第 n 个子元素）选择了四个不同的标题，并为它们设置了百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表格列尺寸的方式。Chris Coyier 在[固定表格布局](https://css-tricks.com/fixing-tables-long-strings/)中更详细地讨论了这一技术。 - 我们将它与一个 100% 的{{cssxref("width")}}组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。 + 我们将这些样式与 100% 的 {{cssxref("width")}} 结合在一起，这意味着表格将填满它所放置的任何容器，并能很好地响应（尽管还需要再做一些工作，才能在窄屏幕宽度上看起来不错）。 -- 一个{{cssxref("border-collapse")}}属性的`collapse`值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当你在表元素上设置边框时，它们之间将会有间隔，如下图所示：![](no-border-collapse.png)这看起来不太好 (虽然可能是你想要的样子，谁知道呢？)。使用 `border-collapse: collapse;` ，让边框合为一条，现在看起来好多了：![](border-collapse.png) -- 我们在整个表设置了一个{{cssxref("border")}}，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。 -- 我们在{{htmlelement("th")}}和{{htmlelement("td")}}元素上设置了一些{{cssxref("padding")}}——这些元素使数据项有了一些空间，使表看起来更加清晰。 +- 为 {{cssxref("border-collapse")}} 属性设置 `collapse` 值对于任何表格样式的工作来说都是一个标准的最佳实践。默认情况下，当你在表格元素上设置边框时，它们之间将会有间隔，如下图所示：![默认边框间距为 2x2 的表格，显示无边框折叠](no-border-collapse.png)这看起来不太好（虽然可能是你想要的样子，谁知道呢？）。使用 `border-collapse: collapse;`，让边框合为一条，现在看起来好多了：![一个 2x2 的表格，其 border-collapse 属性设置为 collapse，边框合为一条线](border-collapse.png) +- 我们在整个表格周围设置了 {{cssxref("border")}}，这是必要的，因为我们将在表格页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。 +- 我们在 {{htmlelement("th")}} 和 {{htmlelement("td")}} 元素上设置了一些 {{cssxref("padding")}}——这些元素使数据项有了一些空间，使表格看起来更加清晰。 -此刻，我们的表看起来好多了： +此刻，我们的表格看起来好多了： -![](table-with-spacing.png) +![一个半样式的表格，其中的间距使数据更加清晰，并显示了英国著名朋克乐队的概况](table-with-spacing.png) -### 一些简单的排版： +### 一些简单的排版 -现在我们把类型整理一下。 +现在我们把文字整理一下。 -首先，我们在[Google Fonts](https://www.google.com/fonts)上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，你只需替换我们提供的{{htmlelement("link")}}元素和定制的{{cssxref("font-family")}}声明，并使用 Google 字体提供给你的内容。 +首先，我们在 [Google 字体](https://fonts.google.com)上找到了一种适合于朋克乐队的字体。如果你愿意，你可以去那里找一个不同的；你只需将我们提供的 {{htmlelement("link")}} 元素和自定义 {{cssxref("font-family")}} 声明替换为 Google 字体提供的声明即可。 -首先，将下面的{{htmlelement("link")}}元素添加到你的 HTML 头部，就在你现有的 `` 元素之上： +首先，将下面的 {{htmlelement("link")}} 元素添加到你的 HTML 头部，就在你现有的 `` 元素之上： ```html ``` -现在将下面的 CSS 添加到你的`style.css`文件，在之前内容后面添加： +现在将下面的 CSS 添加到你的 `style.css` 文件，在之前内容后面添加： ```css -/* typography */ +/* 排版 */ html { font-family: "helvetica neue", helvetica, arial, sans-serif; @@ -193,14 +192,14 @@ tfoot th { 这里没有什么特别的东西。我们通常会对字体样式进行调整，使其更易于阅读： -- 我们已经设置了一个全局无衬线字体;这纯粹是一种风格上的选择。我们还在{{htmlelement("thead")}}和{{htmlelement("tfoot")}}元素的标题上设置了自定义字体，这是一种很不错的、很有朋克风格的外观。 -- 我们在标题和单元格上设置了一些{{cssxref("letter-spacing")}}，因为我们觉得它有助于提高可读性。再次强调，这主要是一种风格上的选择。 -- 我们在{{htmlelement("tbody")}}中的表格单元中对文本进行了居中对齐，使它们与标题对齐。默认情况下，单元格被赋予了一个{{cssxref("text-align")}}的`left`值，并且标题被赋予了一个`center`值，但是通常情况下，让两者对齐看起来更好。标题字体的默认粗体值足以区分它们的外观。 -- 我们在{{htmlelement("tfoot")}}中对标题进行了右对齐，以便与它的数据点更好地关联。 +- 我们已经设置了一个全局无衬线字体；这纯粹是一种风格上的选择。我们还在 {{htmlelement("thead")}} 和 {{htmlelement("tfoot")}} 元素的标题上设置了自定义字体，这是一种很不错的、很有朋克风格的外观。 +- 我们在标题和单元格上设置了一些 {{cssxref("letter-spacing")}}，因为我们觉得它有助于提高可读性。再次强调，这主要是一种风格上的选择。 +- 我们在 {{htmlelement("tbody")}} 中的表格单元中对文本进行了居中对齐，使它们与标题对齐。默认情况下，单元格的 {{cssxref("text-align")}} 设置为 `left` 值，并且标题设置为 `center` 值，但是通常情况下，让两者对齐看起来更好。标题字体的默认粗体值足以区分它们的外观。 +- 我们在 {{htmlelement("tfoot")}} 中对标题进行了右对齐，以便与它的数据点更好地关联。 结果看起来更整洁一些： -![](table-with-typography.png) +![使用全局无衬线字体和良好间距的样式表格，使数据更加清晰易读，并显示了英国著名朋克乐队的摘要](table-with-typography.png) ### 图形和颜色 @@ -228,15 +227,17 @@ tfoot td { 同样，对于表格这里没有什么特别的，但有几件事值得注意。 -我们已经将一个{{cssxref("background-image")}}添加到{{htmlelement("thead")}}和{{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色{{cssxref("color")}}更改为白色 (并给它一个{{cssxref("text-shadow")}})，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。 +我们已经将 {{cssxref("background-image")}} 声明添加到 {{htmlelement("thead")}} 和 {{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色 {{cssxref("color")}} 更改为白色（并给它一个{{cssxref("text-shadow")}}），这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。 -我们还为{{htmlelement("th")}}和 {{htmlelement("td")}}添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样你就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在{{htmlelement("thead")}}和 {{htmlelement("tfoot")}}元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。 +我们还为 {{htmlelement("th")}} 和 {{htmlelement("td")}} 添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样你就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在 {{htmlelement("thead")}} 和 {{htmlelement("tfoot")}} 元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。 -#### 斑马条纹图案 +#### 斑马条纹 -我们想用一个单独的部分来展示如何实现斑马条纹（**zebra stripes**）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的 CSS 添加到你的 `style.css` 文件底部： +我们想用一个单独的部分来展示如何实现**斑马条纹**——通过改变不同数据行的颜色，使表格中交替行不同的数据行可以更容易地进行解析和读取。将下面的 CSS 添加到你的 `style.css` 文件底部： ```css +/* 斑马条纹 */ + tbody tr:nth-child(odd) { background-color: #ff33cc; } @@ -254,21 +255,23 @@ table { } ``` -- 你在前面看到了{{cssxref(":nth-child")}}选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式`2n-1`会选择所有奇数的子元素 (1、3、5 等)，而公式`2n`会选择所有偶数的子元素 (2、4、6 等等)。我们在代码中使用了`odd`和`even`的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的 (醒目的) 颜色。 -- 我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的`.png`，有一点视觉上的扭曲）来提供一些纹理。 -- 最后，我们给整个表格提供了一个纯的背景颜色，这样浏览器不支持`:nth-child`选择器仍然有它们的正文行的背景。 +- 你在前面看到了 {{cssxref(":nth-child")}} 选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式 `2n-1` 会选择所有奇数的子元素（第一个、第三个、第五个等），而公式 `2n` 会选择所有偶数的子元素（第二个、第四个、第六个等）。我们在代码中使用了 `odd` 和 `even` 关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的（醒目的）颜色。 +- 我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的 `.png`，有一点视觉上的扭曲）来提供一些纹理。 +- 最后，我们给整个表格提供了一个纯的背景颜色，这样不支持 `:nth-child` 选择器的浏览器仍然有它们的正文行的背景。 这种颜色爆炸的结果如下： -![](table-with-color.png) +![表格样式精良，正文行的背景为重复背景，整个表格为纯色背景，使显示英国著名朋克乐队摘要的数据更吸引人](table-with-color.png) 现在，这可能有点过头不符合你的品味，但我们在这里想要指出的一点是，表格并非只能是枯燥无味的，学术性的。 ### 样式化标题 -对我们的表格还有最后一点处理——样式化标题。要做到这一点，请将以下内容添加到你的`style.css` 文件底部： +对我们的表格还有最后一点处理——样式化标题。要做到这一点，请将以下内容添加到你的 `style.css` 文件底部： ```css +/* 标题 */ + caption { font-family: "Rock Salt", cursive; padding: 20px; @@ -280,31 +283,27 @@ caption { } ``` -这里没有什么值得注意的地方，除了{{cssxref("caption-side")}}属性，它被赋予了一个`bottom`的值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观（见预览版[punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)）： - -![](table-with-caption.png) - -## 自主学习：样式化你自己的表格 +这里没有什么值得注意的地方，除了 {{cssxref("caption-side")}} 属性，它被设置为 `bottom` 值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观（见预览版 [punk-bands-complete.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)）： -现在，我们希望你可以使用我们的示例表格 HTML(或者使用你自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。 +![样式表格下方的白色背景，包含表格内容的标题。例如“英国著名朋克乐队汇总”](table-with-caption.png) -## 表格样式小贴士 +## 表格样式化小贴士 -在继续之前，我们认为我们将为你提供一个快速列表，列出了上面提到的最有用的点： +在继续讨论之前，我们想先为你快速列出上述最有用的要点： -- 使你的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。 -- 使用 {{cssxref("table-layout")}}`: fixed` 创建更可控的表布局，可以通过在标题{{cssxref("width")}}中设置{{cssxref("width")}}来轻松设置列的宽度。 -- 使用 {{cssxref("border-collapse")}}`: collapse` 使表元素边框合并，生成一个更整洁、更易于控制的外观。 -- 使用{{htmlelement("thead")}}, {{htmlelement("tbody")}}和{{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用 CSS 的地方，因此如果需要的话，可以更容易地将样式层叠在一起。 -- 使用斑马线来让其他行更容易阅读。 -- 使用 {{cssxref("text-align")}}直线对齐你的{{htmlelement("th")}}和{{htmlelement("td")}}文本，使内容更整洁、更易于跟随。 +- 使你的表格标记尽可能简单，并且保持灵活性（例如使用百分比），这样设计就更有响应性。 +- 使用 {{cssxref("table-layout", "table-layout: fixed")}} 创建更可控的表格布局，可以通过在表头（{{htmlelement("th")}}）中设置 {{cssxref("width")}} 来轻松设置列的宽度。 +- 使用 {{cssxref("border-collapse", "border-collapse: collapse")}} 使表格元素边框合并，生成一个更整洁、更易于控制的外观。 +- 使用 {{htmlelement("thead")}}、{{htmlelement("tbody")}} 和 {{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用 CSS 的地方，因此如果需要的话，可以更容易地将样式层叠在一起。 +- 使用斑马条纹来让其他行更容易阅读。 +- 使用 {{cssxref("text-align")}} 将 {{htmlelement("th")}} 和 {{htmlelement("td")}} 文本对齐，这样会更整齐、更容易看懂。 ## 技能测试！ -我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见[技能测试：表格](/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks)。 +我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？在继续学习之前，你可以通过一些进一步的测试来验证自己是否掌握了这些信息——参见[技能测试：表格](/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks)。 ## 总结 -现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试 CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。 +现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。下一篇文章将介绍 [CSS 调试](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS)，探索如何解决一些问题，例如布局看起来不像应该有的样子，或者属性在你认为应该应用的时候没有应用。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。 -{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Advanced_styling_effects", "Learn/CSS/Building_blocks")}} From 8bb66467c210e311e6e5a91e650f6c685642af89 Mon Sep 17 00:00:00 2001 From: ikemt <93726321+ikenk@users.noreply.github.com> Date: Tue, 5 Nov 2024 10:51:47 +0800 Subject: [PATCH 010/316] [zh-cn]: update 'Create author form' (#24310) Co-authored-by: A1lo --- .../forms/create_author_form/index.md | 165 ++++++++++-------- 1 file changed, 88 insertions(+), 77 deletions(-) diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md index 4820a3bf71782b..bbf71f3d7680ad 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.md @@ -1,170 +1,181 @@ --- title: 创建作者表单 slug: Learn/Server-side/Express_Nodejs/forms/Create_author_form +l10n: + sourceCommit: 8d5440dbd259fd6eea32b4f4a200f25257d1bf41 --- -本章节演示，如何为创建作者对象`Author`定义一个页面。 +{{LearnSidebar}} -## 导入验证和清理方法 +本章节将演示如何定义一个用于创建 `Author` 对象的页面。 -为了在种类表单使用 express 验证器，我们必须用 require 导入我们想用的函式。 +## 导入验证和修整方法 -打开 **/controllers/authorController.js**，并在档案最上方加入底下几行： +与[类型表单](/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form)一样，要使用 _express-validator_，我们必须 _require_ 我们想要使用的函数。 + +打开 **/controllers/authorController.js**，并将以下代码添加到文件顶部（路由函数上方）： ```js -const { body, validationResult } = require("express-validator/check"); -const { sanitizeBody } = require("express-validator/filter"); +const { body, validationResult } = require("express-validator"); ``` -## 控制器—get 路由 +## 控制器——get 路由 -找到导出的 `author_create_get()`控制器方法，并替换为底下代码。这里单纯呈现 **author_form.pug** 视图，传送 `title` 变数。 +找到导出的 `author_create_get()` 控制器方法并用以下代码替换。此方法会将 `title` 变量传入 **author_form.pug** 视图并渲染。 ```js -// Display Author create form on GET. -exports.author_create_get = function (req, res, next) { +// 展示 GET 方法获取的创建作者表单 +exports.author_create_get = (req, res, next) => { res.render("author_form", { title: "Create Author" }); }; ``` -## 控制器—post 路由 +## 控制器——post 路由 -找到导出的 `author_create_post()` 控制器方法，并替换为底下代码。 +找到导出的 `author_create_post()` 控制器方法，并将其替换为以下代码。 ```js -// Handle Author create on POST. +// 处理 POST 方法提交的创建作者表单 exports.author_create_post = [ - // Validate fields. + // 验证并且清理字段 body("first_name") - .isLength({ min: 1 }) .trim() + .isLength({ min: 1 }) + .escape() .withMessage("First name must be specified.") .isAlphanumeric() .withMessage("First name has non-alphanumeric characters."), body("family_name") - .isLength({ min: 1 }) .trim() + .isLength({ min: 1 }) + .escape() .withMessage("Family name must be specified.") .isAlphanumeric() .withMessage("Family name has non-alphanumeric characters."), body("date_of_birth", "Invalid date of birth") - .optional({ checkFalsy: true }) - .isISO8601(), + .optional({ values: "falsy" }) + .isISO8601() + .toDate(), body("date_of_death", "Invalid date of death") - .optional({ checkFalsy: true }) - .isISO8601(), - - // Sanitize fields. - sanitizeBody("first_name").trim().escape(), - sanitizeBody("family_name").trim().escape(), - sanitizeBody("date_of_birth").toDate(), - sanitizeBody("date_of_death").toDate(), - - // Process request after validation and sanitization. - (req, res, next) => { - // Extract the validation errors from a request. + .optional({ values: "falsy" }) + .isISO8601() + .toDate(), + + // 在验证和修整完字段后处理请求 + asyncHandler(async (req, res, next) => { + // 从请求中提取验证错误 const errors = validationResult(req); + // 使用经转义和去除空白字符处理的数据创建作者对象 + const author = new Author({ + first_name: req.body.first_name, + family_name: req.body.family_name, + date_of_birth: req.body.date_of_birth, + date_of_death: req.body.date_of_death, + }); + if (!errors.isEmpty()) { - // There are errors. Render form again with sanitized values/errors messages. + // 出现错误。使用清理后的值/错误信息重新渲染表单 res.render("author_form", { title: "Create Author", - author: req.body, + author: author, errors: errors.array(), }); return; } else { - // Data from form is valid. - - // Create an Author object with escaped and trimmed data. - var author = new Author({ - first_name: req.body.first_name, - family_name: req.body.family_name, - date_of_birth: req.body.date_of_birth, - date_of_death: req.body.date_of_death, - }); - author.save(function (err) { - if (err) { - return next(err); - } - // Successful - redirect to new author record. - res.redirect(author.url); - }); + // 表格中的数据有效 + + // 保存作者信息 + await author.save(); + // 重定向到新的作者记录 + res.redirect(author.url); } - }, + }), ]; ``` -此代码的结构和行为，几乎与创建`Genre`对象完全相同。首先，我们验证并清理数据。如果数据无效，那么我们将重新显示表单，以及用户最初输入的数据，和错误消息列表。如果数据有效，那么我们保存新的作者记录，并将用户重定向到作者详细信息页面。 - -> [!NOTE] -> 与`Genre` post 处理程序不同，我们不会在保存之前，检查`Author`对象是否已存在。可以说，我们应该这样做，尽管现在我们可以有多个具有相同名称的作者。 +> [!WARNING] +> 切勿使用 `isAlphanumeric()` 来验证 _name_（正如上面代码所写的那样），因为有许多名字会使用其他字符集。我们在这里这样做是为了演示如何使用验证器，以及如何将其与其他验证器和错误报告进行链式调用。 -验证代码演示了几个新功能： +此代码的结构和行为几乎与创建 `Genre` 对象一致。首先，我们验证并清理数据。如果数据无效，我们将重新显示表单以及用户最初输入的数据和错误消息列表。如果数据有效，那么我们将保存新的作者记录并将用户重定向到作者详情页面。 -- 我们可以用菊花链式连接验证器，使用`withMessage()`指定在前一个验证方法失败时，显示的错误消息。这使得在没有大量代码重复的情况下，提供特定的错误消息变得非常容易。 +与 `Genre` 的 post 处理器不同，我们不会在保存 `Author` 对象之前检查其是否已经存在。从某种程度上说我们应该这样做，但目前我们可能会有多个同名作者。 - ```js - // Validate fields. - body('first_name').isLength({ min: 1 }).trim().withMessage('First name must be specified.') - .isAlphanumeric().withMessage('First name has non-alphanumeric characters.'), - ``` +验证代码演示了几个新特性： -- 我们可以使用`optional()`函数，仅在输入字段时运行后续验证（这允许我们验证可选字段）。例如，下面我们检查可选的出生日期是否符合 ISO8601 标准（`checkFalsy` 旗标，表示我们接受空字符串或`null`作为空值）。 +- 我们可以链式调用验证器，使用 `withMessage()` 指定在先前的验证方法失败时需要显示的错误消息。这使得在没有大量代码重复的情况下，提供特定的错误消息变得非常容易。 ```js - body('date_of_birth', 'Invalid date of birth').optional({ checkFalsy: true }).isISO8601(), + [ + // 验证并修整字段 + body("first_name") + .trim() + .isLength({ min: 1 }) + .escape() + .withMessage("First name must be specified.") + .isAlphanumeric() + .withMessage("First name has non-alphanumeric characters."), + // … + ]; ``` -- 参数从请求中作为字符串接收。我们可以使用`toDate()`（或`toBoolean()`等）将这些转换为正确的 JavaScript 类型。 +- 我们可以使用 `optional()` 函数来保证仅当有字段输入时才去运行后续的验证（这允许我们验证可选字段）。例如，下面我们检查可选的出生日期是否符合 ISO8601 标准（传递的 `{ values: "falsy" }` 对象意味着我们将接受空字符串或 `null` 作为空值）。 ```js - sanitizeBody('date_of_birth').toDate(), + [ + body("date_of_birth", "Invalid date of birth") + .optional({ values: "falsy" }) + .isISO8601() + .toDate(), + ]; ``` +- 参数以字符串形式从请求中接收。我们可以使用 `toDate()`（或 `toBoolean()`）将它们转换为正确的 JavaScript 类型（如上方验证器链末尾所示）。 + ## 视图 -创建 **/views/author_form.pug** 并复制贴上以下文字。 +创建 **/views/author_form.pug** 并复制下方文本。 -```plain +```pug extends layout block content h1=title - form(method='POST' action='') + form(method='POST') div.form-group label(for='first_name') First Name: - input#first_name.form-control(type='text' placeholder='First name (Christian) last' name='first_name' required='true' value=(undefined===author ? '' : author.first_name) ) + input#first_name.form-control(type='text', placeholder='First name (Christian)' name='first_name' required value=(undefined===author ? '' : author.first_name) ) label(for='family_name') Family Name: - input#family_name.form-control(type='text' placeholder='Family name (surname)' name='family_name' required='true' value=(undefined===author ? '' : author.family_name)) + input#family_name.form-control(type='text', placeholder='Family name (Surname)' name='family_name' required value=(undefined===author ? '' : author.family_name)) div.form-group label(for='date_of_birth') Date of birth: input#date_of_birth.form-control(type='date' name='date_of_birth' value=(undefined===author ? '' : author.date_of_birth) ) button.btn.btn-primary(type='submit') Submit + if errors ul for error in errors li!= error.msg ``` -此视图的结构和行为与**genre_form.pug**模板完全相同，因此我们不再对其进行描述。 +该视图的结构和行为与 **genre_form.pug** 模板完全相同，因此我们不会再次描述它。 > [!NOTE] -> 某些浏览器不支持 input `type=“date”`，因此你不会获得日期选取部件或默认的*`dd/mm/yyyy`*占位符，而是获取一个空的纯文本字段。一种解决方法，是明确添加属性`placeholder='dd/mm/yyyy'`，以便在功能较少的浏览器上，仍然可以获得有关所需文本格式的信息。 +> 某些浏览器不支持 `type="date"` 的 input，因此你不会获得日期选择器微件或默认的 `dd/mm/yyyy` 占位符，而是获取一个空的纯文本字段。一种解决方法是显式添加属性 `placeholder='dd/mm/yyyy'`，以便在功能较差的浏览器上仍然可以获得有关所需文本格式的信息。 -### 自我挑战：加入死亡日期 +### 自我挑战：添加死亡日期 -上面的模板少了一个输入字段 `date_of_death` 。依照跟生日表单同样的模式，创建此字段！ +上面的模板缺少用于输入死亡日期 `date_of_death` 的字段。按照与出生日期表单组相同的模式创建字段！ -## 它看起來像是？ +## 它看起来像是？ -运行本应用，打开浏览器访问网址，然后点击创建新作者 Create new author 连结。如果每个东西都设定正确了，你的网站看起应该像底下的截图。在你输入一个值之后，它应该会被储存，并且你将被带到作者详细信息页面。 +运行本应用，打开浏览器访问网址 `http://localhost:3000/`，然后点击 _Create new author_ 链接。如果一切设置正确，你的网站应类似于下方截图。在你输入一个值后，它应该会被保存，并且进入作者详情页面。 -![Author Create Page - Express Local Library site](locallibary_express_author_create_empty.png) +![作者创建页面——Express 本地图书馆网站](locallibary_express_author_create_empty.png) > [!NOTE] -> 如果你尝试使用日期的各种输入格式，你可能会发现格式`yyyy-mm-dd`行为不正常。这是因为 JavaScript 将日期字符串，视为包含 0 小时的时间，但另外将该格式的日期字符串（ISO 8601 标准）视为包括 0 小时 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则日期显示（即本地）将在你输入的日期之前一天。这是我们在这里没有解决的几个复杂问题之一（例如多字姓和有多个作者的书本）。 +> 如果你尝试使用各种日期输入格式，你可能会发现格式 `yyyy-mm-dd` 行为不恰当。这是因为 JavaScript 中的日期字符串包含了 0 时这个时间，而且还将该格式的日期字符串（ISO 8601 标准）视为包括 0 时的 UTC 时间，而不是本地时间。如果你的时区在 UTC 以西，则本地日期显示将会是你输入的日期的前一天。这是我们在此没有解决的几个复杂问题（例如多字姓氏和多作者书籍）之一。 ## 下一步 From eee53a0f3dffecb8193d75262b34fd6630d52b60 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 2 Nov 2024 00:49:56 +0900 Subject: [PATCH 011/316] =?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 --- files/ja/glossary/inset_properties/index.md | 23 +++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 files/ja/glossary/inset_properties/index.md diff --git a/files/ja/glossary/inset_properties/index.md b/files/ja/glossary/inset_properties/index.md new file mode 100644 index 00000000000000..d6943b524005db --- /dev/null +++ b/files/ja/glossary/inset_properties/index.md @@ -0,0 +1,23 @@ +--- +title: Inset properties (インセットプロパティ) +slug: Glossary/Inset_properties +l10n: + sourceCommit: c5f403bb08c91ae77ddfe47f937438fb5e6fcae5 +--- + +{{GlossarySidebar}} + +CSS において、**インセットプロパティ** (inset properties) は、要素の既定の位置からのオフセットを指定することで、位置指定された要素の位置を制御します。物理的、論理的、一括指定のインセットプロパティがあります。 + +インセットプロパティには、{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("bottom")}}, {{cssxref("right")}} の物理プロパティ、フローに基づく同等物である {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} の{{glossary("logical properties", "論理プロパティ")}}、そして一括指定の {{cssxref("inset-block")}}, {{cssxref("inset-inline")}}, {{cssxref("inset")}} が含まれます。 + +**物理的プロパティ**は、要素の特定の物理的な辺を参照します。論理プロパティは、ブロック軸とインライン軸に基づく、方向キーワードを使用します。**ブロック軸**は、ブロックレイアウト内の要素の積み重ね順序を定義する軸を指します。**インライン軸**はブロック軸に垂直で、ブロック内のテキストなどのインラインコンテンツが流れる方向を表します。対応付けは、要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} によって異なります。 + +インセットプロパティの解釈は、{{cssxref("position")}} プロパティの値によって異なります。`position: absolute` が設定されている場合、[包含ブロック](/ja/docs/Web/CSS/Containing_block)または[アンカー要素](/ja/docs/Web/CSS/CSS_anchor_positioning/Using)からの内部余白を意味します。`position: relative` が設定されている場合、ボックスの既定では、マージン辺の位置からの内部余白を意味します。`sticky` が設定されている場合、{{glossary("scroll container","スクロールコンテナー")}}の辺からの内部余白を意味します。`fixed` の値は `absolute` と似ていますが、この要素は固定位置指定の包含ブロック（ふつうはビューポート）に対して相対的に位置指定され、サイズが指定されます。 + +## 関連情報 + +- [レイアウトと包含ブロック](/ja/docs/Web/CSS/Containing_block) +- [CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_positioned_layout)モジュール +- [CSS 論理プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール +- [CSS アンカー位置指定](/ja/docs/Web/CSS/CSS_anchor_positioning)モジュール From 3603b07f99a9d03b46490687395e0cf3fb730159 Mon Sep 17 00:00:00 2001 From: Tomoki Aonuma Date: Fri, 1 Nov 2024 14:46:51 +0900 Subject: [PATCH 012/316] [ja] fix translation for String.isWellFormed --- .../reference/global_objects/string/iswellformed/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/javascript/reference/global_objects/string/iswellformed/index.md b/files/ja/web/javascript/reference/global_objects/string/iswellformed/index.md index 9624019bd1fa92..627757032982e8 100644 --- a/files/ja/web/javascript/reference/global_objects/string/iswellformed/index.md +++ b/files/ja/web/javascript/reference/global_objects/string/iswellformed/index.md @@ -21,7 +21,7 @@ isWellFormed() ### 返値 -この文字列に孤立サロゲートがある場合は `true`、そうでなれば `false`。 +この文字列に孤立サロゲートがない場合は `true`、そうでなれば `false`。 ## 解説 From 6daadcb3d1ca6fec4f7077007b9cc961d271fb6b Mon Sep 17 00:00:00 2001 From: etienne bazin Date: Tue, 5 Nov 2024 13:43:55 +0100 Subject: [PATCH 013/316] Fix typo in french sendBeacon documentation (#24363) --- files/fr/web/api/navigator/sendbeacon/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md index 01c9cc3100fa06..36f205a57b760f 100644 --- a/files/fr/web/api/navigator/sendbeacon/index.md +++ b/files/fr/web/api/navigator/sendbeacon/index.md @@ -50,7 +50,7 @@ function enregistrerDonnees() { } ``` -C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! +C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résout tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. From 0976f39664723f7d8a27fd744b99cfc656c112ab Mon Sep 17 00:00:00 2001 From: Arthur Sedlukha Date: Tue, 5 Nov 2024 19:04:47 +0300 Subject: [PATCH 014/316] [ru]: standard title for "see also" (#24295) [ru]: standard naming for "see also" --- files/ru/learn/accessibility/index.md | 2 +- .../client-side_web_apis/client-side_storage/index.md | 2 +- files/ru/learn/server-side/django/skeleton_website/index.md | 2 +- files/ru/web/api/validitystate/index.md | 2 +- files/ru/web/api/validitystate/patternmismatch/index.md | 2 +- files/ru/web/api/window/caches/index.md | 2 +- files/ru/web/api/window/settimeout/index.md | 2 +- files/ru/web/css/_colon_lang/index.md | 2 +- files/ru/web/css/animation-iteration-count/index.md | 2 +- files/ru/web/css/border/index.md | 2 +- .../understanding_z-index/stacking_without_z-index/index.md | 2 +- files/ru/web/css/text-shadow/index.md | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/files/ru/learn/accessibility/index.md b/files/ru/learn/accessibility/index.md index 10dd5afc290c45..99d8e657ad6823 100644 --- a/files/ru/learn/accessibility/index.md +++ b/files/ru/learn/accessibility/index.md @@ -35,7 +35,7 @@ slug: Learn/Accessibility - [Найди недочёты в доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting) - : В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить. -## Также советуем посмотреть +## Смотрите также - [Начать создание доступных веб-приложений сегодня](https://egghead.io/courses/start-building-accessible-web-applications-today) — отличная серия видеоуроков Марси Саттона. - [Ресурсы университета Deque](https://dequeuniversity.com/resources/) — включает примеры кода, ссылки для чтения с экрана и другие полезные ресурсы. diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md index e544199c6c4645..649d69cdbd20ee 100644 --- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -761,7 +761,7 @@ self.addEventListener("fetch", function (e) { Это всё, пока что. Мы надеемся наш краткий обзор `client-side storage` окажется полезным для вас. -## Также стоит почитать +## Смотрите также - [Web storage API](/ru/docs/Web/API/Web_Storage_API) - [IndexedDB API](/ru/docs/Web/API/IndexedDB_API) diff --git a/files/ru/learn/server-side/django/skeleton_website/index.md b/files/ru/learn/server-side/django/skeleton_website/index.md index d1fa77bcd50fbf..6382649c22a440 100644 --- a/files/ru/learn/server-side/django/skeleton_website/index.md +++ b/files/ru/learn/server-side/django/skeleton_website/index.md @@ -334,7 +334,7 @@ python3 manage.py runserver Теперь скелет [Сайта местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) сделан и запущен, теперь самое время начать писать код, который научит сайт делать то, что он должен делать. -## Также посмотрите эти статьи +## Смотрите также - [Пишем своё первое приложение на Django - часть 1](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) (документация Django) - [Приложения](https://docs.djangoproject.com/en/2.2/ref/applications/) (документация Django). содержит информацию о настройке приложений. diff --git a/files/ru/web/api/validitystate/index.md b/files/ru/web/api/validitystate/index.md index 2b5b8835bffe70..a619b8c5b2d115 100644 --- a/files/ru/web/api/validitystate/index.md +++ b/files/ru/web/api/validitystate/index.md @@ -42,7 +42,7 @@ slug: Web/API/ValidityState {{Compat}} -## Также смотрите +## Смотрите также - [Руководство: Валидация ограничений](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation) - [Учебник: Валидация форм](/ru/docs/Learn/Forms/Form_validation) diff --git a/files/ru/web/api/validitystate/patternmismatch/index.md b/files/ru/web/api/validitystate/patternmismatch/index.md index 0b3cb53560e536..9b020c88497cba 100644 --- a/files/ru/web/api/validitystate/patternmismatch/index.md +++ b/files/ru/web/api/validitystate/patternmismatch/index.md @@ -67,7 +67,7 @@ input:invalid { {{Compat}} -## Также смотрите +## Смотрите также - [Валидация ограничений](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation) - [Формы: Валидация форм](/ru/docs/Learn/Forms/Form_validation) diff --git a/files/ru/web/api/window/caches/index.md b/files/ru/web/api/window/caches/index.md index 86c5c567fc4d95..26f8383323d297 100644 --- a/files/ru/web/api/window/caches/index.md +++ b/files/ru/web/api/window/caches/index.md @@ -50,7 +50,7 @@ this.addEventListener("install", (event) => { {{Compat}} -## Также смотрите +## Смотрите также - [Service Workers](/ru/docs/Web/API/ServiceWorker_API) - [Web Workers](/ru/docs/Web/API/Web_Workers_API) diff --git a/files/ru/web/api/window/settimeout/index.md b/files/ru/web/api/window/settimeout/index.md index fe84d280394f90..89a5045fe68a4e 100644 --- a/files/ru/web/api/window/settimeout/index.md +++ b/files/ru/web/api/window/settimeout/index.md @@ -296,7 +296,7 @@ Browsers including Internet Explorer, Chrome, Safari, and Firefox store the dela {{Compat}} -## Также интересно +## Смотрите также - [JavaScript timers](/ru/docs/JavaScript/Timers) - [Timer.jsm](/ru/docs/Mozilla/JavaScript_code_modules/Timer.jsm) diff --git a/files/ru/web/css/_colon_lang/index.md b/files/ru/web/css/_colon_lang/index.md index ed3d84ff29400c..794bea90e1c251 100644 --- a/files/ru/web/css/_colon_lang/index.md +++ b/files/ru/web/css/_colon_lang/index.md @@ -72,7 +72,7 @@ In this example, the `:lang()` pseudo-class is used to match the parents of quot {{Compat}} -## Также смотрите +## Смотрите также - Language-related pseudo-classes: {{cssxref(":lang")}}, {{cssxref(":dir")}} - HTML [`lang`](/ru/docs/Web/HTML/Global_attributes#lang) attribute diff --git a/files/ru/web/css/animation-iteration-count/index.md b/files/ru/web/css/animation-iteration-count/index.md index 5fab1b500342f9..0747ce6b370422 100644 --- a/files/ru/web/css/animation-iteration-count/index.md +++ b/files/ru/web/css/animation-iteration-count/index.md @@ -46,7 +46,7 @@ animation-iteration-count: 2, 0, infinite; {{Compat}} -## Также смотрите +## Смотрите также - [Использование CSS-анимацией](/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy) - {{ domxref("AnimationEvent", "AnimationEvent") }} diff --git a/files/ru/web/css/border/index.md b/files/ru/web/css/border/index.md index 43cdd9052b360b..a44785e13fd0df 100644 --- a/files/ru/web/css/border/index.md +++ b/files/ru/web/css/border/index.md @@ -74,6 +74,6 @@ style { {{Compat}} -## Также смотрите +## Смотрите также - {{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }} diff --git a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md index 7749f6efac7f65..31606b5f6e8598 100644 --- a/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md +++ b/files/ru/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md @@ -109,7 +109,7 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-ind {{ EmbedLiveSample('Пример') }} -### Так же посмотрите +## Смотрите также - [Stacking and float](/en/CSS/Understanding_z-index/Stacking_and_float) : How floating elements are handled - [Adding z-index](/en/CSS/Understanding_z-index/Adding_z-index) : Using z-index to change default stacking diff --git a/files/ru/web/css/text-shadow/index.md b/files/ru/web/css/text-shadow/index.md index 6e985c93085ba6..9880f0803ac9cb 100644 --- a/files/ru/web/css/text-shadow/index.md +++ b/files/ru/web/css/text-shadow/index.md @@ -112,7 +112,7 @@ text-shadow: unset; - В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством `text-shadow` с заданным цветом к элементу со свойством `text-shadow` без заданного цвета ([Firefox bug 726550](https://bugzil.la/726550)). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как [Quantum CSS](https://wiki.mozilla.org/Quantum) или [Stylo](https://wiki.mozilla.org/Quantum/Stylo), выпуск которого запланирован уже в версии Firefox 57). -## Также смотрите +## Смотрите также - [Text Shadow CSS Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Интерактивный генератор теней CSS. - {{cssxref("box-shadow")}} From 0770aa472be60797f8f891a4890b9cc1aa8c3320 Mon Sep 17 00:00:00 2001 From: Arthur Sedlukha Date: Tue, 5 Nov 2024 19:07:28 +0300 Subject: [PATCH 015/316] [ru]: standard title for "Usage notes" (#24307) [ru]: "Usage notes" title sync --- files/ru/web/html/element/abbr/index.md | 2 +- files/ru/web/html/element/caption/index.md | 2 +- files/ru/web/html/element/ol/index.md | 2 +- files/ru/web/html/element/ul/index.md | 2 +- files/ru/web/svg/attribute/dur/index.md | 2 +- files/ru/web/svg/attribute/letter-spacing/index.md | 2 +- files/ru/web/svg/element/a/index.md | 2 +- files/ru/web/svg/element/use/index.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ru/web/html/element/abbr/index.md b/files/ru/web/html/element/abbr/index.md index 3e2fb04bd4b188..4b4d53332cca8b 100644 --- a/files/ru/web/html/element/abbr/index.md +++ b/files/ru/web/html/element/abbr/index.md @@ -25,7 +25,7 @@ slug: Web/HTML/Element/abbr Каждый элемент `` независим от других. Указание `title` на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием. -## Примечания к использованию +## Примечания по использованию ### Обычное использование diff --git a/files/ru/web/html/element/caption/index.md b/files/ru/web/html/element/caption/index.md index 598f734d689b47..6913911289cf3a 100644 --- a/files/ru/web/html/element/caption/index.md +++ b/files/ru/web/html/element/caption/index.md @@ -34,7 +34,7 @@ slug: Web/HTML/Element/caption - `bottom` - : Заголовок отображается под таблицей. -## Примечание к использованию +## Примечания по использованию Когда элемент {{HTMLElement("table")}}, содержащий `` является единственным потомком элемента {{HTMLElement("figure")}}, вам следует использовать элемент {{HTMLElement("figcaption")}} вместо ``. diff --git a/files/ru/web/html/element/ol/index.md b/files/ru/web/html/element/ol/index.md index 6a270ed0557064..78232a9e56a125 100644 --- a/files/ru/web/html/element/ol/index.md +++ b/files/ru/web/html/element/ol/index.md @@ -35,7 +35,7 @@ HTML-элемент **`
    `** используется для упорядоч > [!NOTE] > Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS {{CSSxRef("list-style-type")}}. -## Примечания об использовании +## Примечания по использованию Обычно, элементы списка отображены с [маркером](/ru/docs/Web/CSS/::marker), предшествующим цифрам или буквам. diff --git a/files/ru/web/html/element/ul/index.md b/files/ru/web/html/element/ul/index.md index 6099b6732f1bd5..686bc63ff4c5d4 100644 --- a/files/ru/web/html/element/ul/index.md +++ b/files/ru/web/html/element/ul/index.md @@ -33,7 +33,7 @@ HTML-элемент **`