From 32de6c7d124517cdba69918f93be62fd1d6135f2 Mon Sep 17 00:00:00 2001 From: A1lo Date: Tue, 16 Jan 2024 20:43:29 +0800 Subject: [PATCH 001/335] zh-cn: update the translation of `` MathML element (#17912) --- .../zh-cn/web/mathml/element/mspace/index.md | 53 +++++++++---------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/files/zh-cn/web/mathml/element/mspace/index.md b/files/zh-cn/web/mathml/element/mspace/index.md index 00d407c9770e3b..125ac083b414bb 100644 --- a/files/zh-cn/web/mathml/element/mspace/index.md +++ b/files/zh-cn/web/mathml/element/mspace/index.md @@ -1,40 +1,40 @@ --- title: slug: Web/MathML/Element/mspace +l10n: + sourceCommit: 67cbfbf7a408e7180137b286247025bc40716642 --- {{MathMLRef}} -MathML\元素用来表示一段空白，空白的大小由它自身的属性决定。 +**``** [MathML](/zh-CN/docs/Web/MathML) 元素用来显示一段空白，空白的大小由它自身的属性设置。 ## 属性 -- class, id, style - - : 用来供[样式表](/zh-CN/docs/CSS)使用。 -- depth - - : 空白在基线下方的高度 (参阅 [length](/zh-CN/docs/MathML/Attributes/Values#Lengths)). -- height - - : 空白在基线上方的高度 (参阅 [length](/zh-CN/docs/MathML/Attributes/Values#Lengths)). -- linebreak - - : Indicates a line-break at the space. Possible values: `auto` (default value), `newline`, `nobreak`, `goodbreak`, `badbreak`. - Starting with MathML 3, it is preferred to use {{ MathMLElement("mo") }} to control linebreaking. -- mathbackground - - : 用来设置背景色，可以使用 **`#rgb`**、**`#rrggbb`** 或者 [HTML 颜色名](/zh-CN/docs/Web/CSS/color_value)。 -- width - - : 空白的宽度 (参阅 [length](/zh-CN/docs/MathML/Attributes/Values#Lengths)). - -注意，一些像`mathcolor`、`mathvariant`或`dir`这种常用的属性在``上是无效的。 - -## 例子 - -```html - - - - +该元素的属性包括[全局 MathML 属性](/zh-CN/docs/Web/MathML/Global_attributes)以及下列属性： + +- `depth` + - : [``](/zh-CN/docs/Web/CSS/length-percentage) 值，表示空白（在基线下方）的深度。 +- `height` + - : [``](/zh-CN/docs/Web/CSS/length-percentage) 值，表示空白（在基线上方）的高度。 +- `width` + - : [``](/zh-CN/docs/Web/CSS/length-percentage) 值，表示空白的宽度。 + +> **备注：** 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受[旧版 MathML 长度值](/zh-CN/docs/Web/MathML/Values#旧版_mathml_长度)。 + +## 示例 + +```html-nolint + + 1 + + 2 ``` +{{EmbedLiveSample('示例')}} + ## 规范 {{Specifications}} @@ -43,11 +43,6 @@ MathML\元素用来表示一段空白，空白的大小由它自身的 {{Compat}} -## Gecko 说明 - -- [Indentation attributes](http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs) 暂时没有实现 (for Gecko see [Firefox bug 534962](https://bugzil.la/534962)). -- 从 Gecko 23.0 开始实现了对`width`属性负值的支持。 - ## 参见 - {{ MathMLElement("mpadded") }} From 9fe2f13794140488a8fe92855611289a3eec3ce8 Mon Sep 17 00:00:00 2001 From: A1lo Date: Tue, 16 Jan 2024 21:00:32 +0800 Subject: [PATCH 002/335] zh-cn: update the translation of svg transform (#17899) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../web/svg/attribute/transform/index.md | 161 +++++++++++------- 1 file changed, 100 insertions(+), 61 deletions(-) diff --git a/files/zh-cn/web/svg/attribute/transform/index.md b/files/zh-cn/web/svg/attribute/transform/index.md index af8c3e61b954db..04cf71e4ce43aa 100644 --- a/files/zh-cn/web/svg/attribute/transform/index.md +++ b/files/zh-cn/web/svg/attribute/transform/index.md @@ -1,11 +1,17 @@ --- title: transform slug: Web/SVG/Attribute/transform +l10n: + sourceCommit: 193ee88d26a8ab4dea8f8b70464167edccee92e1 --- {{SVGRef}} -**`transform`** 属性定义了一系列应用于元素和元素子元素的变换规则集合 +**`transform`** 属性定义应用于元素及其子元素的变换规则列表。 + +> **备注：** 从 SVG2 开始，`transform` 为表现属性，这意味着它可以用作 CSS 属性。但是，请注意 CSS 属性和该属性的语法存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS {{cssxref('transform')}} 属性的文档。 + +你可以在任何 SVG 元素上使用此属性。 ## 示例 @@ -25,42 +31,68 @@ svg { + translate(-36 45.5) + skewX(40) + scale(1 0.5)"> - + ``` -{{EmbedLiveSample('示例', '100%', 200)}} +{{EmbedLiveSample("示例", '100%', 200)}} + +在 SVG 1.1 中，仅有 16 种元素可以使用它：{{SVGElement('a')}}、{{SVGElement('circle')}}、{{SVGElement('clipPath')}}、{{SVGElement('defs')}}、{{SVGElement('ellipse')}}、{{SVGElement('foreignObject')}}、{{SVGElement('g')}}、{{SVGElement('image')}}、{{SVGElement('line')}}、{{SVGElement('path')}}、{{SVGElement('polygon')}}、{{SVGElement('polyline')}}、{{SVGElement('rect')}}、{{SVGElement('switch')}}、{{SVGElement('text')}} 和 {{SVGElement('use')}}。 + +另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}} 和 {{SVGElement('radialGradient')}} 支持 `gradientTransform` 属性，而 {{SVGElement('pattern')}} 支持 `patternTransform` 属性，两者的行为与 `transform` 属性完全相同。 -**提示：** 从 SVG2 开始，transform 是一种图像属性，这意味着它可以用作 CSS 属性。但是请注意，CSS 属性和属性之间在语法上存在一些差异。有关在这种情况下使用的特定语法，请参见 CSS 属性{{cssxref('transform')}}的文档 + + + + + + + + + + + + + + + +
值 + <transform-list> +
默认值无
动画性有
-作为表示属性，任何元素都可以使用**`transform`** （在 SVG 1.1 中，仅这 16 个元素被允许使用：{{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, and {{SVGElement('use')}})。 +## 变换函数 -另外，作为 SVG 1.1 的遗留物，{{SVGElement('linearGradient')}}和{{SVGElement('radialGradient')}}支持 `gradientTransform` 属性，而{{SVGElement('pattern')}}支持 `patternTransform` 属性，两者的行为完全相同于 `transform` 属性 +`transform` 属性的 `` 可以使用以下所有的变换函数 -| Value | **[\](/zh-CN/docs/Web/SVG/Content_type#Transform-list)** | -| ------------- | ------------------------------------------------------------------------ | -| Default value | _none_ | -| Animatable | Yes | +> **警告：** 根据规范，你还应该能够使用 CSS [变换函数](/zh-CN/docs/Web/CSS/transform-function)。但是，这不能保证兼容性。 -## Transform functions +### 矩阵 -`transform` 属性 `` 可以使用以下的所有 `transform` 函数 +`matrix( )` 变换函数以六个值的变换矩阵形式指定变换。`matrix(a,b,c,d,e,f)` 等同于应用变换矩阵： -**警告：** 根据规范，你还应该能够使用 CSS {{cssxref('transform-function', 'transform functions')}}，但是，这不能保证兼容性。 + + (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} + -### Matrix +它通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系： -`matrix( )` 函数以六个值的变换矩阵形式指定一个 `transform`。matrix（a，b，c，d，e，f）等同于应用变换矩阵： \ begin {pmatrix} a＆c＆e \\\ b＆d＆f \\\ 0＆0＆1 \ end {pmatrix} 通过以下矩阵等式将坐标从先前的坐标系映射到新的坐标系： (xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x*{\mathrm{newCoordSys}} \\ y*{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{prevCoordSys}} \\ y*{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{prevCoordSys}} + c y*{\mathrm{prevCoordSys}} + e \\ b x*{\mathrm{prevCoordSys}} + d y*{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} + + (xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} + -#### 举例 +#### 示例 ```css hidden html, @@ -75,26 +107,26 @@ svg { @@ -108,13 +140,20 @@ svg { ``` -{{EmbedLiveSample('Matrix', '100%', 200)}} +{{EmbedLiveSample('矩阵', '100%', 200)}} -### Translate +### 平移 -`translate( [])` 变换函数通过 `x` 向量和 `y` 向量移动元素 (i.e. `xnew = xold + , ynew = yold + `). 如果 `y` 向量没有被提供，那么默认为 `0` +`translate( [])` 变换函数将对象移动 `x` 和 `y`。如果没有提供 `y`，那么其默认为 `0`。 + +换而言之： + +```plain +xnew = xold + +ynew = yold + +``` -#### 举例 +#### 示例 ```css hidden html, @@ -126,10 +165,10 @@ svg { ```html - + - + - + - + + transform="translate(50 50)" /> ``` -{{EmbedLiveSample('Translate', '100%', 200)}} +{{EmbedLiveSample('示例_3', '100%', 200)}} -### Scale +### 缩放 -`scale( [])` 变换函数通过 `x` 和 `y`指定一个 **等比例放大缩小** 操作。如果 `y` 没有被提供，那么假定为等同于 `x` +`scale( [])` 变换函数指定一个按 `x` 和 `y` 进行缩放的操作。如果没有提供 `y`，那么假定其等同于 `x`。 -#### 举例 +#### 示例 ```css hidden html, @@ -176,27 +215,27 @@ svg { ```html - + - - + + - - + + - + ``` -{{EmbedLiveSample('Scale', '100%', 200)}} +{{EmbedLiveSample('缩放', '100%', 200)}} -### Rotate +### 旋转 -`rotate( [ ])` 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果 x 和 y 没有提供，那么默认为当前元素坐标系原点。否则，就以`(x,y)`为原点进行旋转。 +`rotate( [ ])` 变换函数指定一个围绕给定点旋转 `a` 度的操作。如果没有提供可选参数 `x` 和 `y`，那么默认绕当前用户坐标系的原点旋转。否则，就以 `(x,y)` 为原点进行旋转。 -#### 举例 +#### 示例 ```css hidden html, @@ -210,27 +249,27 @@ svg { - + - + + transform="rotate(100, 10, 10)" /> ``` -{{EmbedLiveSample('Rotate', '100%', 200)}} +{{EmbedLiveSample('旋转', '100%', 200)}} -### SkewX +### 倾斜 X -`skewX()` 变换函数指定了沿 `x` 轴倾斜 `a°` 的倾斜变换。 +`skewX()` 变换函数指定沿 `x` 轴倾斜 `a` 度的倾斜变换。 -#### 举例 +#### 示例 ```css hidden html, @@ -248,13 +287,13 @@ svg { ``` -{{EmbedLiveSample('SkewX', '100%', 200)}} +{{EmbedLiveSample('倾斜 X', '100%', 200)}} -### SkewY +### 倾斜 Y -`skewY()` 变换函数指定了沿 `y` 轴倾斜 `a°` 的倾斜变换。 +`skewY()` 变换函数指定了沿 `y` 轴倾斜 `a` 度的倾斜变换。 -#### 举例 +#### 示例 ```css hidden html, @@ -272,8 +311,8 @@ svg { ``` -{{EmbedLiveSample('SkewY', '100%', 200)}} +{{EmbedLiveSample('倾斜 Y', '100%', 200)}} -## Specification +## 规范 {{Specifications}} From 8f3a3a6e744cae8ad4cdf90150b9554230829078 Mon Sep 17 00:00:00 2001 From: Kang Peng Date: Tue, 16 Jan 2024 22:55:32 +0800 Subject: [PATCH 003/335] zh-cn: fix the translation (#17919) --- .../learn/getting_started_with_the_web/html_basics/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md index afce6fa55f0a2e..b06e041f34d538 100644 --- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md @@ -98,7 +98,7 @@ My cat is very grumpy - ``——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。 - ``——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。 -- ``——{{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向看客展示的页面成员，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用作风格化页面的 CSS、字符集声明等等。 +- ``——{{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向观众展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用于设置页面样式的 CSS、字符集声明等等。 - ``——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。 - ``——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。 - ``——{{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。 From 6d526d2526f73238140b4a8c0ea71dd327607084 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 12 Jan 2024 22:13:40 +0900 Subject: [PATCH 004/335] =?UTF-8?q?2023/06/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/glossary/composite_operation/index.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 files/ja/glossary/composite_operation/index.md diff --git a/files/ja/glossary/composite_operation/index.md b/files/ja/glossary/composite_operation/index.md new file mode 100644 index 00000000000000..c73b6b5de1ad80 --- /dev/null +++ b/files/ja/glossary/composite_operation/index.md @@ -0,0 +1,23 @@ +--- +title: Composite operation (合成演算) +slug: Glossary/Composite_operation +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +CSS では、 CSS ルールのプロパティの値がそのプロパティの基盤値であり、[キーフレーム](/ja/docs/Web/CSS/@keyframes)の同じプロパティの値がそのプロパティの効果値です。 + +合成演算 (_composite operation_) は、効果値と基盤値とを結合して、最終的なキーフレームの効果値を生成するために使用する固有の演算です。合成演算には 3 種類があります。 + +- **置換**: 効果値が基盤値を置き換えます。この場合の最終的な効果値は、元の効果値そのものです。 +- **追加**: 効果値は基盤値に追加されます。 +- **累積**: 効果値は基礎値に結合されます。 + +> **メモ:** CSSの合成演算はアニメーションにのみ適用されます。 + +## 関連情報 + +- [`animation-composition`](/ja/docs/Web/CSS/animation-composition) +- [`KeyframeEffect.composite`](/ja/docs/Web/API/KeyframeEffect/composite) From 92baae1bd3346eb6c9b0d40d3801c0ea73e055f3 Mon Sep 17 00:00:00 2001 From: Jason Lam Date: Wed, 17 Jan 2024 17:03:26 +0800 Subject: [PATCH 005/335] [zh-cn]: add the translation of iterator overview (#17868) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../global_objects/iterator/index.md | 194 ++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/iterator/index.md diff --git a/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md b/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md new file mode 100644 index 00000000000000..c111f17a438702 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/iterator/index.md @@ -0,0 +1,194 @@ +--- +title: Iterator +slug: Web/JavaScript/Reference/Global_Objects/Iterator +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a +--- + +{{JSRef}} + +**`Iterator`** 对象是一个符合[迭代器协议](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#迭代器协议)的对象，其提供了 `next()` 方法用以返回迭代器结果对象。所有内置迭代器都继承自 `Iterator` 类。`Iterator` 类提供了 [`@@iterator`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator/@@iterator) 方法，该方法返回迭代器对象本身，使迭代器也[可迭代](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代协议)。它还提供了一些使用迭代器的辅助方法。 + +## 描述 + +以下都是内置的 JavaScript 迭代器： + +- _数组迭代器_，返回自 {{jsxref("Array.prototype.values()")}}、{{jsxref("Array.prototype.keys()")}}、{{jsxref("Array.prototype.entries()")}}、[`Array.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)、{{jsxref("TypedArray.prototype.values()")}}、{{jsxref("TypedArray.prototype.keys()")}}、{{jsxref("TypedArray.prototype.entries()")}}、[`TypedArray.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator) 和 [`arguments[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator)。 +- _字符串迭代器_，返回自 [`String.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)。 +- _Map 迭代器_，返回自 {{jsxref("Map.prototype.values()")}}、{{jsxref("Map.prototype.keys()")}}、{{jsxref("Map.prototype.entries()")}} 和 [`Map.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator)。 +- _Set 迭代器_，返回自 {{jsxref("Set.prototype.values()")}}、{{jsxref("Set.prototype.keys()")}}、{{jsxref("Set.prototype.entries()")}} 和 [`Set.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator)。 +- _正则表达式字符串迭代器_，返回自 [`RegExp.prototype[@@matchAll]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll) 和 {{jsxref("String.prototype.matchAll()")}}。 +- {{jsxref("Generator")}} 对象，返回自[生成器函数](/zh-CN/docs/Web/JavaScript/Reference/Statements/function*)。 +- _Segment 迭代器_，返回自 [`Intl.Segmenter.prototype.segment()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment) 返回的 [`Segments`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments) 对象的 [`[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/@@iterator) 方法。 +- _迭代器辅助方法_，返回自迭代器辅助方法例如 {{jsxref("Iterator.prototype.filter()")}} 和 {{jsxref("Iterator.prototype.map()")}}。 + +每个迭代器都有一个不同的原型对象，它定义了特定迭代器使用的 `next()` 方法。例如，所有字符串迭代器对象都继承自隐藏对象 `StringIteratorPrototype`，该对象具有按码位迭代当前字符串的 `next()` 方法。`StringIteratorPrototype` 还有一个 [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性，其初始值为字符串 `"String Iterator"`。该属性在 {{jsxref("Object.prototype.toString()")}} 中使用。类似地，其他迭代器原型也有自己的 `@@toStringTag` 值，这些值与上面给出的名称相同。 + +所有这些原型对象都继承自 `Iterator.prototype`，它提供了一个返回迭代器对象本身的 [`@@iterator`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) 方法，这使迭代器也变得[可迭代](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代协议)。 + +### 迭代器辅助方法 + +> **备注：** 这些方法是*迭代器*辅助方法，而不是*可迭代对象*辅助方法，因为可迭代对象的唯一要求就是具有 `@@iterator` 方法，因此它们没有共享的原型来安装这些方法。 + +`Iterator` 类本身提供了一些使用迭代器的辅助方法。例如，你可能想做以下事情： + +```js +const nameToDeposit = new Map([ + ["Anne", 1000], + ["Bert", 1500], + ["Carl", 2000], +]); + +const totalDeposit = [...nameToDeposit.values()].reduce((a, b) => a + b); +``` + +这首先将 {{jsxref("Map.prototype.values()")}} 返回的迭代器器转换为数组，然后使用 {{jsxref("Array.prototype.reduce()")}} 方法计算总和。然而，这既创建了一个中间数组，又重复了数组两次。相反，你可以使用迭代器本身的 `reduce()` 方法： + +```js +const totalDeposit = nameToDeposit.values().reduce((a, b) => a + b); +``` + +这种方法更加高效，因为它只迭代迭代器一次，而不需要保存任何中间值。迭代器辅助方法对于使用无限迭代器是必需的： + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const seq = fibonacci(); +const firstThreeDigitTerm = seq.find((n) => n >= 100); +``` + +你无法将 `seq` 转换为数组，因为它是无穷的。相反，你可以使用迭代器本身的 `find()` 方法，该方法仅需要迭代 `seq` 查找满足条件的第一个值。 + +你会发现许多迭代器方法类似于数组方法，例如： + +| 迭代器方法 | 数组方法 | +| ------------------------------------------ | --------------------------------------- | +| {{jsxref("Iterator.prototype.every()")}} | {{jsxref("Array.prototype.every()")}} | +| {{jsxref("Iterator.prototype.filter()")}} | {{jsxref("Array.prototype.filter()")}} | +| {{jsxref("Iterator.prototype.find()")}} | {{jsxref("Array.prototype.find()")}} | +| {{jsxref("Iterator.prototype.flatMap()")}} | {{jsxref("Array.prototype.flatMap()")}} | +| {{jsxref("Iterator.prototype.forEach()")}} | {{jsxref("Array.prototype.forEach()")}} | +| {{jsxref("Iterator.prototype.map()")}} | {{jsxref("Array.prototype.map()")}} | +| {{jsxref("Iterator.prototype.reduce()")}} | {{jsxref("Array.prototype.reduce()")}} | +| {{jsxref("Iterator.prototype.some()")}} | {{jsxref("Array.prototype.some()")}} | + +{{jsxref("Iterator.prototype.drop()")}} 和 {{jsxref("Iterator.prototype.take()")}} 组合起来有点类似于 {{jsxref("Array.prototype.slice()")}}。 + +在这些方法中，{{jsxref("Iterator/filter", "filter()")}}、{{jsxref("Iterator/flatMap", "flatMap()")}}、{{jsxref("Iterator/map", "map()")}}、{{jsxref("Iterator/drop", "drop()")}} 和 {{jsxref("Iterator/take", "take()")}} 返回一个新的*迭代器辅助方法*对象。迭代器辅助方法也是一个 `Iterator` 实例，使辅助方法可链式调用。所有迭代器辅助方法对象都继承了一个通用的原型对象，该对象实现了迭代器协议： + +- `next()` + - : 调用底层迭代器的 `next()` 方法，将辅助方法应用于结果，并返回结果。 +- `return()` + - : 调用底层迭代器的 `return()` 方法，并返回结果。 + +迭代器辅助方法与底层迭代器共享相同的数据源，因此迭代迭代器辅助方法会导致底层迭代器也被迭代。没有办法“复刻”迭代器以允许它被多次迭代。 + +```js +const it = [1, 2, 3].values(); +const it2 = it.drop(0); // 本质上是一个副本 +console.log(it.next().value); // 1 +console.log(it2.next().value); // 2 +console.log(it.next().value); // 3 +``` + +### 恰当的迭代器 + +有两种“迭代器”：符合[迭代器协议](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#迭代器协议)（必需且只需具有 `next()` 方法）的对象，以及继承自 `Iterator` 类的对象，后者可以使用辅助方法。两者互不包含——继承自 `Iterator` 的对象不会自动变成迭代器，因为 `Iterator` 类并未定义 `next()` 方法。相反，这些对象需要自己定义 `next()` 方法。*恰当的迭代器*指的是即符合迭代器协议，同时又继承自 `Iterator` 的迭代器。大多数代码所期望的迭代器都是恰当的迭代器并可以通过迭代返回恰当的迭代器。要创建恰当的迭代器，可以定义一个继承 {{jsxref("Iterator/Iterator", "Iterator")}} 的类，或使用 {{jsxref("Iterator.from()")}} 方法。 + +```js +class MyIterator extends Iterator { + next() { + // … + } +} + +const myIterator = Iterator.from({ + next() { + // … + }, +}); +``` + +## 构造函数 + +- {{jsxref("Iterator/Iterator", "Iterator()")}} {{experimental_inline}} + - ：旨在被创建迭代器的其他类[继承](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。直接用于构建会抛出错误。 + +## 静态方法 + +- {{jsxref("Iterator.from()")}} {{experimental_inline}} + - : 从一个迭代器或可迭代对象创建一个新的 `Iterator` 对象。 + +## 实例属性 + +这些属性定义于 `Iterator.prototype` 并由所有 `Iterator` 实例所共享。 + +- {{jsxref("Object/constructor", "Iterator.prototype.constructor")}} + - : 创建实例对象的构造函数。对于 `Iterator` 实例，其初始值是 {{jsxref("Iterator/Iterator", "Iterator")}} 构造函数。 +- `Iterator.prototype[@@toStringTag]` + + - : [`@@toStringTag`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) 属性的初始值是字符串 `"Iterator"`。该属性在 {{jsxref("Object.prototype.toString()")}} 中使用。 + + > **备注：** 与大多数内置类的 `@@toStringTag` 不同，出于 web 兼容性原因，`Iterator.prototype[@@toStringTag]` 是可写的。 + +## 实例方法 + +- {{jsxref("Iterator.prototype.drop()")}} {{experimental_inline}} + - : 返回一个新的迭代器辅助方法，其会跳过当前迭代器开头给定数量的元素。 +- {{jsxref("Iterator.prototype.every()")}} {{experimental_inline}} + - : 测试是否所有由迭代器产生的元素都能通过由提供的函数实现的测试。 +- {{jsxref("Iterator.prototype.filter()")}} {{experimental_inline}} + - : 返回一个新的迭代器辅助方法，其只产生迭代器中令提供的回调函数返回 `true` 的那些元素。 +- {{jsxref("Iterator.prototype.find()")}} {{experimental_inline}} + - : 返回迭代器产生的第一个满足提供的测试函数的元素。如果没有满足测试函数的值，则返回 {{jsxref("undefined")}}。 +- {{jsxref("Iterator.prototype.flatMap()")}} {{experimental_inline}} + - : 返回一个新的迭代器辅助方法，其获取原始迭代器中的每个元素，通过映射函数进行映射，并产生映射函数返回的元素（包含在另一个迭代器或可迭代对象）。 +- {{jsxref("Iterator.prototype.forEach()")}} {{experimental_inline}} + - : 为迭代器生成的每个元素执行一次提供的函数。 +- {{jsxref("Iterator.prototype.map()")}} {{experimental_inline}} + - : 返回一个新的迭代器辅助方法，其生成的元素都由映射函数进行转换而来。 +- {{jsxref("Iterator.prototype.reduce()")}} {{experimental_inline}} + - : 对迭代器生成的每个元素执行用户提供的“reducer”回调函数，传入前一个元素计算的返回值。在所有元素上运行 reducer 的最终结果是单个值。 +- {{jsxref("Iterator.prototype.some()")}} {{experimental_inline}} + - : 测试迭代器中是否至少有一个能够的元素通过由提供的函数实现的测试。返回一个布尔值。 +- {{jsxref("Iterator.prototype.take()")}} {{experimental_inline}} + - : 返回一个新的迭代器帮助方法，它生成当前迭代器中给定数量的元素，然后结束。 +- {{jsxref("Iterator.prototype.toArray()")}} {{experimental_inline}} + - : 创建一个用迭代器产生的元素填充的新的 {{jsxref("Array")}} 实例。 +- [`Iterator.prototype[@@iterator]()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator/@@iterator) + - : 返回迭代器对象本身。这使迭代器对象也是可迭代的。 + +## 示例 + +### 使用迭代器作为可迭代对象 + +所有内置迭代器都是可迭代的，因此你可以在 `for...of` 循环中使用它们： + +```js +const arrIterator = [1, 2, 3].values(); +for (const value of arrIterator) { + console.log(value); +} +// 打印：1, 2, 3 +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`core-js` 中 `Iterator` 的 polyfill](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Statements/function*", "function*")}} +- [迭代协议](/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols) From 1d0ef2008b6fe30db38f7456546bc8beebfb4cf5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 17 Jan 2024 11:33:30 +0000 Subject: [PATCH 006/335] Bump prettier from 3.2.2 to 3.2.4 (#17932) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1864189c6be3e7..1fb2538058760c 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "markdownlint-rule-search-replace": "1.2.0", "mdast-util-from-markdown": "^2.0.0", "ora": "^8.0.1", - "prettier": "3.2.2", + "prettier": "3.2.4", "unist-util-visit": "^5.0.0", "yargs": "^17.7.2" } diff --git a/yarn.lock b/yarn.lock index 67670871fb1988..f421a1d6a4836e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -954,10 +954,10 @@ pidtree@0.6.0: resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c" integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g== -prettier@3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.2.tgz#96e580f7ca9c96090ad054616c0c4597e2844b65" - integrity sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A== +prettier@3.2.4: + version "3.2.4" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.4.tgz#4723cadeac2ce7c9227de758e5ff9b14e075f283" + integrity sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ== punycode.js@^2.3.1: version "2.3.1" From ac163324db3b1737d5cc277b2273ad907d9ec44e Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 17 Jan 2024 23:16:07 +0900 Subject: [PATCH 007/335] Translate missing "Deprecated properties" section (#17928) Translate deprecated properties section ko/docs/Web/API/Navigator --- files/ko/web/api/navigator/index.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/files/ko/web/api/navigator/index.md b/files/ko/web/api/navigator/index.md index 93e2cb85519fdb..b941860ed6b379 100644 --- a/files/ko/web/api/navigator/index.md +++ b/files/ko/web/api/navigator/index.md @@ -99,34 +99,34 @@ l10n: - {{domxref("Navigator.standalone")}} {{Non-standard_Inline}} - : 브라우저가 독립 실행 모드로 실행중인지를 나타내는 불리언 값을 리턴합니다. Apple의 iOS Safari에서만 지원합니다. -### Deprecated properties +### 사용되지 않는 속성 - {{domxref("Navigator.activeVRDisplays")}} {{ReadOnlyInline}} {{Deprecated_Inline}} {{Non-standard_Inline}} - - : Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is `true`). + - : 현재 {{domxref("VRDisplay.ispresenting")}}이 `true`인 모든 {{domxref("VRDisplay")}} 객체를 담고 있는 배열을 반환합니다. - {{domxref("Navigator.appCodeName")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Always returns `'Mozilla'`, in any browser. + - : 어느 브라우저에서든 항상 `'Mozilla'`를 반환합니다. - {{domxref("Navigator.appName")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Always returns `'Netscape'`, in any browser. + - : 어느 브라우저에서든 항상 `'Netscape'`를 반환합니다. - {{domxref("Navigator.appVersion")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns the version of the browser as a string. Do not rely on this property to return the correct value. + - : 브라우저의 버전을 문자열로 반환합니다. 정확한 값으로 사용할 때에는 이 기능에 의존하지 마십시오. - {{domxref("Navigator.doNotTrack")}} {{ReadOnlyInline}} {{Deprecated_Inline}} {{non-standard_inline}} - - : Reports the value of the user's do-not-track preference. When this value is "1", your website or application should not track the user. + - : 사용자의 추적 금지 설정 값을 알립니다. 이 값이 "1"인 경우, 당신의 웹사이트 또는 애플리케이션은 사용자를 추적해서는 안됩니다. - {{domxref("Navigator.mimeTypes")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser. + - : 브라우저가 지원하는 MIME 타입들을 나열하는 {{domxref("MimeTypeArray")}}를 반환합니다. - {{domxref("Navigator.oscpu")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns a string that represents the current operating system. + - : 현재 운영 체제를 나타내는 문자열을 반환합니다. - {{domxref("Navigator.platform")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns a string representing the platform of the browser. Do not rely on this function to return a significant value. + - : 브라우저의 플랫폼을 나타내는 문자열을 반환합니다. 중요한 값으로 사용할 때에는 이 기능에 의존하지 마십시오. - {{domxref("Navigator.plugins")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser. + - : 브라우저에 설치된 플러그인을 나열하는 {{domxref("PluginArray")}}을 반환합니다. - {{domxref("Navigator.product")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Always returns `'Gecko'`, in any browser. + - : 어느 브라우저에서든 항상 `'Gecko'`를 반환합니다. - {{domxref("Navigator.productSub")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns either the string `'20030107'`, or `'"20100101'`. + - : `'20030107'`과 `'20100101'` 중 하나를 문자열로 반환합니다. - {{domxref("Navigator.vendor")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Returns either the empty string, `'Apple Computer Inc.'`, or `'Google Inc.'`. + - : 빈 문자열, `'Apple Computer Inc.'`, `'Google Inc.'` 중 하나를 반환합니다. - {{domxref("Navigator.vendorSub")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - - : Always returns the empty string. + - : 항상 빈 문자열을 반환합니다. ## 메서드 From a53cacb09dc67403fb70a8219899a57858ad11bc Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Wed, 17 Jan 2024 00:05:59 +0900 Subject: [PATCH 008/335] Translate Presentation API --- files/ja/web/api/presentation_api/index.md | 285 +++++++++++++++++++++ 1 file changed, 285 insertions(+) create mode 100644 files/ja/web/api/presentation_api/index.md diff --git a/files/ja/web/api/presentation_api/index.md b/files/ja/web/api/presentation_api/index.md new file mode 100644 index 00000000000000..e3e665986bd0b6 --- /dev/null +++ b/files/ja/web/api/presentation_api/index.md @@ -0,0 +1,285 @@ +--- +title: Presentation API +slug: Web/API/Presentation_API +l10n: + sourceCommit: 95dff5ec1195f072b8e48a2273294933670b1e99 +--- + +{{securecontext_header}}{{SeeCompatTable}}{{DefaultAPISidebar("Presentation API")}} + +Presentation API は、(ウェブブラウザーなどの) {{Glossary("user agent", "ユーザーエージェント")}}がウェブコンテンツをプロジェクターやネットワークで接続されたテレビジョンなどの大型プレゼンテーションデバイスに効率よく表示できるようにします。対応しているマルチメディアデバイスには、HDMI や DVI などの有線接続のディスプレイも、[DLNA](https://www.dlna.org/)、[Chromecast](https://developers.google.com/cast/)、[AirPlay](https://developer.apple.com/airplay/)、[Miracast](https://www.wi-fi.org/discover-wi-fi/miracast) を用いた無線接続のディスプレイもあります。 + + +![1-UA モードでは操作ページと表示ページをディスプレイに出力する前に一緒に読み込みます。2-UA モードではそれらを Presentation Control Protocol を用いて別々に読み込みます。](presentation_mode_illustration.png) + +一般に、ウェブページは Presentation Controller API を用いてプレゼンテーションデバイスにレンダリングするウェブコンテンツを指定し、プレゼンテーションセッションを開始します。表示されるウェブコンテンツは、Presentation Receiver API を用いてセッションの状態を取得します。メッセージベースのチャンネルを持つ操作ページと受信ページの両方を提供することで、ウェブ開発者はそれらの 2 ページ間のやり取りを実装できます。 + +プレゼンテーションデバイスが提供する接続方法によって、操作ページと受信ページは同一のユーザーエージェントでレンダリングされるか、別のユーザーエージェントでレンダリングされます。 + +- 1-UA モードのデバイスでは、両方のページが同一のユーザーエージェントで読み込まれます。しかし、受信ページのレンダリング結果は対応しているリモートレンダリングプロトコルを用いてプレゼンテーションデバイスに送られます。 +- 2-UA モードのデバイスでは、受信ページは直接プレゼンテーションデバイスで読み込まれます。操作を行うユーザーエージェントは、プレゼンテーションセッションを制御し、2 ページ間でメッセージを送信するため、対応しているプレゼンテーション制御プロトコルを用いてプレゼンテーションデバイスとやり取りします。 + +## インターフェイス + +- {{domxref("Presentation")}} + - : 操作を行うブラウジングコンテキストでは、`Presentation` インターフェイスが外部の画面へのプレゼンテーションを開始する際のブラウザーのデフォルトの挙動を上書きする方法を提供します。受信を行うブラウジングコンテキストでは、`Presentation` インターフェイスは利用可能なプレゼンテーションの接続へのアクセスを提供します。 +- {{domxref("PresentationRequest")}} + - : 操作を行うブラウジングコンテキストで生成されたプレゼンテーションを開始または再接続します。 +- {{domxref("PresentationAvailability")}} + - : [PresentationAvailability](/ja/docs/Web/API/PresentationAvailability) オブジェクトは、利用可能なプレゼンテーション用の画面に紐付けられ、プレゼンテーションの要求に対する _プレゼンテーション用の画面の利用可能性_ を表します。 +- {{domxref("PresentationConnectionAvailableEvent")}} + - : `PresentationConnectionAvailableEvent` は、オブジェクトに紐づく接続が生成された時、[`PresentationRequest`](/ja/docs/Web/API/PresentationRequest) で発火します。 +- {{domxref("PresentationConnection")}} + - : それぞれのプレゼンテーションの接続は、[PresentationConnection](/ja/docs/Web/API/PresentationConnection) オブジェクトで表されます。 +- {{domxref("PresentationConnectionCloseEvent")}} + - : `PresentationConnectionCloseEvent` は、プレゼンテーションの接続が `closed` 状態になった時発火します。 +- {{domxref("PresentationReceiver")}} + - : [PresentationReceiver](/ja/docs/Web/API/PresentationReceiver) は、受信を行うブラウジングコンテキストが操作を行うブラウジングコンテキストへのアクセスとやり取りをできるようにします。 +- {{domxref("PresentationConnectionList")}} + - : `PresentationConnectionList` は、終了していないプレゼンテーションの接続のコレクションを表します。これは、新しいプレゼンテーションの接続が利用可能になったイベントのモニターでもあります。 + +## 例 + +以下の例のコードは、Presentation API の主な機能の使用法を示します。`controller.html` で操作器を実装し、`presentation.html` でプレゼンテーションを実装します。両方のページがドメイン `https://example.org` (`https://example.org/controller.html` and `https://example.org/presentation.html`) から配信されます。これらの例では、操作ページは一度に 1 本のプレゼンテーションを管理していることを仮定しています。詳細は、例のコード内のコメントを参照してください。 + +### プレゼンテーション画面の利用可能性を監視する + +`controller.html` で: + +```html + + +``` + +### 新しいプレゼンテーションを開始する + +`controller.html` で: + +```html + +``` + +### プレゼンテーションに再接続する + +`controller.html` ファイルで: + +```html + + +``` + +### 操作を行うユーザーエージェントによるプレゼンテーションの開始 + +`controller.html` ファイルで: + +```html + +``` + +ページで `presentation.defaultRequest` を設定することで、操作を行うユーザーエージェントがプレゼンテーションを開始する際に用いる `PresentationRequest` を指定できます。 + +### 接続状態の監視とデータのやり取り + +`controller.html` で: + +```html + + + + +``` + +### 利用可能な接続の監視と挨拶 + +`presentation.html` で: + +```js +const addConnection = (connection) => { + connection.onmessage = (message) => { + if (message.data === "Say hello") connection.send("hello"); + }; +}; + +navigator.presentation.receiver.connectionList.then((list) => { + list.connections.forEach((connection) => { + addConnection(connection); + }); + list.onconnectionavailable = (evt) => { + addConnection(evt.connection); + }; +}); +``` + +### メッセージとともにロケールの情報を渡す + +`controller.html` ファイルで: + +```html + +``` + +`presentation.html` ファイルで: + +```html + +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +[Presentation API polyfill](https://mediascape.github.io/presentation-api-polyfill/) に、W3C の [Second Screen Working Group](https://www.w3.org/2014/secondscreen/) で標準化中の [Presentation API](https://w3c.github.io/presentation-api/) 仕様書の JavaScript ポリフィルがあります。このポリフィルの主目的は、Presentation API が異なるプレゼンテーションの仕組みの上にどのように実装されうるかを探ることです。 From a1639f32a25e0385928be62cfc3ede7858322f92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Wed, 17 Jan 2024 00:11:49 +0900 Subject: [PATCH 009/335] Remove extra blank line (thanks mdn-linter) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ja/web/api/presentation_api/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/ja/web/api/presentation_api/index.md b/files/ja/web/api/presentation_api/index.md index e3e665986bd0b6..be435b33d96c79 100644 --- a/files/ja/web/api/presentation_api/index.md +++ b/files/ja/web/api/presentation_api/index.md @@ -9,7 +9,6 @@ l10n: Presentation API は、(ウェブブラウザーなどの) {{Glossary("user agent", "ユーザーエージェント")}}がウェブコンテンツをプロジェクターやネットワークで接続されたテレビジョンなどの大型プレゼンテーションデバイスに効率よく表示できるようにします。対応しているマルチメディアデバイスには、HDMI や DVI などの有線接続のディスプレイも、[DLNA](https://www.dlna.org/)、[Chromecast](https://developers.google.com/cast/)、[AirPlay](https://developer.apple.com/airplay/)、[Miracast](https://www.wi-fi.org/discover-wi-fi/miracast) を用いた無線接続のディスプレイもあります。 - ![1-UA モードでは操作ページと表示ページをディスプレイに出力する前に一緒に読み込みます。2-UA モードではそれらを Presentation Control Protocol を用いて別々に読み込みます。](presentation_mode_illustration.png) 一般に、ウェブページは Presentation Controller API を用いてプレゼンテーションデバイスにレンダリングするウェブコンテンツを指定し、プレゼンテーションセッションを開始します。表示されるウェブコンテンツは、Presentation Receiver API を用いてセッションの状態を取得します。メッセージベースのチャンネルを持つ操作ページと受信ページの両方を提供することで、ウェブ開発者はそれらの 2 ページ間のやり取りを実装できます。 From 3a1c968d86501f98560ca3338f359761e5ea53d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Wed, 17 Jan 2024 19:28:13 +0900 Subject: [PATCH 010/335] Update sourceCommit --- files/ja/web/api/presentation_api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/api/presentation_api/index.md b/files/ja/web/api/presentation_api/index.md index be435b33d96c79..de9ec2b3f62605 100644 --- a/files/ja/web/api/presentation_api/index.md +++ b/files/ja/web/api/presentation_api/index.md @@ -2,7 +2,7 @@ title: Presentation API slug: Web/API/Presentation_API l10n: - sourceCommit: 95dff5ec1195f072b8e48a2273294933670b1e99 + sourceCommit: 88c098f5bd651a5c587d7b32dba055766c1789ca --- {{securecontext_header}}{{SeeCompatTable}}{{DefaultAPISidebar("Presentation API")}} From 3d8755f4b45c48b9d352a6e8c1cb4cc840848480 Mon Sep 17 00:00:00 2001 From: Vick Vasquez Date: Wed, 17 Jan 2024 11:10:34 -0600 Subject: [PATCH 011/335] feat: translate Constructor/File Page to es (#17786) * feat: translate Constructor/File Page to es * Apply suggestions from code review --------- Co-authored-by: Agatem --- files/es/web/api/file/file/index.md | 58 +++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 files/es/web/api/file/file/index.md diff --git a/files/es/web/api/file/file/index.md b/files/es/web/api/file/file/index.md new file mode 100644 index 00000000000000..d09530045b5b0c --- /dev/null +++ b/files/es/web/api/file/file/index.md @@ -0,0 +1,58 @@ +--- +title: "File: Constructor File()" +slug: Web/API/File/File +l10n: + sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c +--- + +{{APIRef("File API")}}{{AvailableInWorkers}} + +El constructor **`File()`** crea una nueva instancia del objeto {{domxref("File")}}. + +## Sintaxis + +```js-nolint +new File(fileBits, fileName) +new File(fileBits, fileName, options) +``` + +### Parámetros + +- `fileBits` + - : Un objeto [iterable](/es/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) como un {{jsxref("Array")}}, que tiene {{jsxref("ArrayBuffer")}}s, + {{jsxref("TypedArray")}}s, {{jsxref("DataView")}}s, {{domxref("Blob")}}s, cadenas, + o una mezcla de cualquiera de dichos elementos, que se pondrá dentro de {{domxref("File")}}. + Nota que las cadenas aquí están codificados como UTF-8, a diferencia de las cadenas UTF-16 de JavaScript habituales. +- `fileName` + - : Una cadena que representa el nombre del archivo o ruta del archivo. +- `options` {{optional_inline}} + + - : Un objeto de opciones que contiene los atributos para el archivo. Las opciones disponibles son los siguientes. + + - `type` {{optional_inline}} + - : Una cadena que representa el tipo MIME del contenido que contendrá el archivo. El valor predeterminado es `""` + - `endings` {{optional_inline}} + - : Cómo interpretar los caracteres de salto de linea (`\n`) dentro del contenido, si el dato es texto. El valor predeterminado, `transparent`, copia caracteres de nueva línea en el blob sin cambiarlos. Para convertir nuevas líneas a la convención nativa del sistema anfitrión, especifica el valor `native`. + - `lastModified` {{optional_inline}} + - : Un número que representa el número de milisegundos entre la época de tiempo Unix y la última modificación del archivo. El valor predeterminado es {{jsxref("Date.now()")}}. + +## Ejemplos + +```js +const file = new File(["foo"], "foo.txt", { + type: "text/plain", +}); +``` + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{domxref("FileReader")}} +- {{domxref("Blob")}} From e4a8dea71000573c134d94bc838962193c526e63 Mon Sep 17 00:00:00 2001 From: Anatoliy Dzhudzhiev Date: Wed, 17 Jan 2024 22:24:31 +0300 Subject: [PATCH 012/335] [ru] fix typo on 'Web/JavaScript/Guide/Numbers_and_dates' --- files/ru/web/javascript/guide/numbers_and_dates/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ru/web/javascript/guide/numbers_and_dates/index.md b/files/ru/web/javascript/guide/numbers_and_dates/index.md index 48965dafe647c9..dda0ef6ac99362 100644 --- a/files/ru/web/javascript/guide/numbers_and_dates/index.md +++ b/files/ru/web/javascript/guide/numbers_and_dates/index.md @@ -138,7 +138,7 @@ Math.sin(1.56); ## `Объект Date` -JavaScript не имеет отдельного типа данных для хранения дат. Однако, вы можете использовать объект {{jsxref("Date")}} и его методы для работы с датами и временном в вашем приложении. Объект `Date` имеет большое количество методов для записи, чтения и оперирования датой и временем, а свойств не имеет ни одного. +JavaScript не имеет отдельного типа данных для хранения дат. Однако, вы можете использовать объект {{jsxref("Date")}} и его методы для работы с датами и временем в вашем приложении. Объект `Date` имеет большое количество методов для записи, чтения и оперирования датой и временем, а свойств не имеет ни одного. JavaScript оперирует датами во многом аналогично языку Java. Для работы с датой эти два языка имеют множество одинаковых методов, и оба они хранят даты как количество миллисекунд, прошедших с 00:00:00 1 Января 1970 года. From 8835a790d90022868e903cb0577b92f0ad615fcc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 13 Jan 2024 17:06:15 +0900 Subject: [PATCH 013/335] =?UTF-8?q?2023/06/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 --- .../ja/web/css/animation-composition/index.md | 180 ++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/ja/web/css/animation-composition/index.md diff --git a/files/ja/web/css/animation-composition/index.md b/files/ja/web/css/animation-composition/index.md new file mode 100644 index 00000000000000..080bb7101d6c42 --- /dev/null +++ b/files/ja/web/css/animation-composition/index.md @@ -0,0 +1,180 @@ +--- +title: animation-composition +slug: Web/CSS/animation-composition +l10n: + sourceCommit: d35542bdca7fef10c5f82678d5669f633afe7b32 +--- + +{{CSSRef}} + +**`animation-composition`** は [CSS](/ja/docs/Web/CSS) のプロパティで、複数のアニメーションが同じプロパティに同時に影響する場合に使用する{{Glossary("composite operation", "合成演算")}}を指定します。 + +## 構文 + +```css +/* 単一のアニメーション */ +animation-composition: replace; +animation-composition: add; +animation-composition: accumulate; + +/* 複数のアニメーション */ +animation-composition: replace, add; +animation-composition: add, accumulate; +animation-composition: replace, add, accumulate; + +/* グローバル値 */ +animation-composition: inherit; +animation-composition: initial; +animation-composition: revert; +animation-composition: revert-layer; +animation-composition: unset; +``` + +> **メモ:** 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、{{cssxref("animation-name")}}が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定)を参照してください。 + +### 値 + +- `replace` + - : 効果値がプロパティの基盤値を上書きします。これが既定値です。 +- `add` + - : 効果値は、プロパティの基盤値の上に構築されます。この演算は加算効果をもたらします。加算演算が可換でない種類のアニメーションの場合、オペランドの順序は、基礎値の後に効果値が続きます。 +- `accumulate` + - : 効果値と基礎値は結合されます。加算処理が可換でない種類のアニメーションでは、オペランドの順序は基礎値の後に効果値が続きます。 + +## 解説 + +[@keyframes](/ja/docs/Web/CSS/@keyframes) アットルールが対象とする各プロパティは、効果スタックに関連付けられています。効果スタックの値は、 CSS スタイルルールのプロパティの基礎値 (_underlying value_) と、キーフレームのプロパティの効果値 (_effect value_) を組み合わせて計算されます。 `animation-composition` プロパティは、基礎値と効果値の合成方法を指定するのに役立ちます。 + +例えば、下記の CSS の場合、 `blur(5px)` が基盤値で、 `blur(10px)` が効果値です。 `animation-composition` プロパティは、基礎値と効果値の効果を合成した後、最終的な効果値を生成する処理を指定します。 + +```css +.icon:hover { + filter: blur(5px); + animation: 3s infinite pulse; + animation-composition: add; +} + +@keyframes pulse { + 0% { + filter: blur(10px); + } + 100% { + filter: blur(20px); + } +} +``` + +例えばこの例で、 `animation-composition` プロパティに異なる値を設定したとします。それぞれの場合の最終的な効果値は下記で説明するように計算されます。 + +- `replace` を指定すると、 `blur(10px)` は `0%` のキーフレームで `blur(5px)` を置き換えます。これはプロパティの既定値です。 +- `add` を指定すると、 `0%` のキーフレームの合成効果値は `blur(5px) blur(10px)` になります。 +- `accumulate` を指定すると、 `0%` のキーフレームの合成効果値は `blur(15px)` になります。 + +> **メモ:** 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### animation-composition 値の理解 + +下記の例では、様々な `animation-composition` の値を横に並べて効果を表示しています。 + +#### HTML + +```html +
+ replace +
+
+
+ add +
+
+
+ accumulate +
+
+``` + +#### CSS + +ここで基盤値は `translateX(50px) rotate(45deg)` です。 + +```css hidden +.container { + width: 230px; + height: 200px; + background: cyan; + display: inline-block; + text-align: center; +} + +.target { + width: 20px; + height: 50px; + background: green; + border-radius: 10px; + margin: 20px 0; +} +``` + +```css +@keyframes slide { + 20%, + 40% { + transform: translateX(100px); + background: yellow; + } + 80%, + 100% { + transform: translateX(150px); + background: orange; + } +} + +.target { + transform: translateX(30px) rotate(45deg); + animation: slide 5s linear infinite; +} +.target:hover { + animation-play-state: paused; +} +#replace { + animation-composition: replace; +} +#add { + animation-composition: add; +} +#accumulate { + animation-composition: accumulate; +} +``` + +#### 結果 + +{{EmbedLiveSample("Reversing the animation direction","100%","250")}} + +- `replace` を使用すると、 `transform` プロパティの `0%, 20%` のキーフレームでの最終的な効果値は `translateX(100px)` になります（基盤の値である `translateX(30px) rotate(45deg)` を完全に置き換えます）。この場合、要素は 45deg から 0deg まで回転し、要素自体に設定された既定値から 0% マークで設定された回転しない値までアニメーションします。これが既定の動作です。 +- `add` を使用すると、 `transform` プロパティの `0%, 20%` のキーフレームでの最終的な効果値は、`translateX(30px) rotate(45deg)` に `translateX(100px)` が続きます。つまり、要素は右に `30px` 移動し、`45deg` 回転し、さらに X 軸方向に `100px` 移動します。 +- `accumulate` を称すると、 `0%, 20%` キーフレームでの最終的な効果値は `translateX(130px) rotate(45deg)` になります。つまり、 2 つの X 軸の移動値 `30px` と `100px` が結合または「累積」されます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- [KeyFrameEffect の composite プロパティ](/ja/docs/Web/API/KeyframeEffect/composite) +- 他の関連アニメーションプロパティ: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From c6c55b59b839041635cda328f9317bcee8f00d4a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 13 Jan 2024 23:33:48 +0900 Subject: [PATCH 014/335] =?UTF-8?q?2023/06/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-delay/index.md | 25 +++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/animation-delay/index.md b/files/ja/web/css/animation-delay/index.md index d3a719ea98236a..82fafa8cb3214e 100644 --- a/files/ja/web/css/animation-delay/index.md +++ b/files/ja/web/css/animation-delay/index.md @@ -1,6 +1,8 @@ --- title: animation-delay slug: Web/CSS/animation-delay +l10n: + sourceCommit: 34bc6ac7c5d03e5891bf94b0d4ebeccb0e7a29e5 --- {{CSSRef}} @@ -26,6 +28,7 @@ animation-delay: 2.1s, 480ms; animation-delay: inherit; animation-delay: initial; animation-delay: revert; +animation-delay: revert-layer; animation-delay: unset; ``` @@ -35,11 +38,13 @@ animation-delay: unset; - : アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (`s`) またはミリ秒 (`ms`) のどちらかで指定できます。単位は必須です。 - 正の数が指定された場合は、アニメーションが始まる経過時間を示します。 `0s` （既定値）の場合は、アニメーションは適用されたらすぐに始まります。 + 正の値を指定すると、指定した時刻が経過した後にアニメーションを始めることを示します。既定値である `0s` は、アニメーションが適用されるとすぐに始めることを示します。 負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 `-1s` を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。 -> **メモ:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** `animation-delay` は [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)では効果がありません。 ## 公式定義 @@ -51,7 +56,9 @@ animation-delay: unset; ## 例 -### delay が 2 秒であるアニメーション +### アニメーションの遅延を設定 + +このアニメーションは遅延がが 2 秒です。 #### HTML @@ -67,6 +74,9 @@ animation-delay: unset; border-radius: 10px; width: 100px; height: 100px; +} + +.box:hover { animation-name: rotate; animation-duration: 0.7s; animation-delay: 2s; @@ -84,9 +94,11 @@ animation-delay: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +矩形の上にカーソルを当てるとアニメーションが始まります。 + +{{EmbedLiveSample("Setting an animation delay","100%","250")}} -[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +例については [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -98,5 +110,6 @@ animation-delay: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From 9bf097a6e078eb08d74fe356e4bee4e7ba52eb8a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 02:02:38 +0900 Subject: [PATCH 015/335] =?UTF-8?q?2023/07/17=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-direction/index.md | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/animation-direction/index.md b/files/ja/web/css/animation-direction/index.md index bc150f1133a13d..a4f1bacaf6a7c3 100644 --- a/files/ja/web/css/animation-direction/index.md +++ b/files/ja/web/css/animation-direction/index.md @@ -1,11 +1,13 @@ --- title: animation-direction slug: Web/CSS/animation-direction +l10n: + sourceCommit: a1596fe065b9c726f9412999d2218b7b6e256e30 --- {{CSSRef}} -[CSS](/ja/docs/Web/CSS) の **`animation-direction`** プロパティは、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。 +**`animation-direction`** は [CSS](/ja/docs/Web/CSS) のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。 {{EmbedInteractiveExample("pages/css/animation-direction.html")}} @@ -28,6 +30,7 @@ animation-direction: alternate, reverse, normal; animation-direction: inherit; animation-direction: initial; animation-direction: revert; +animation-direction: revert-layer; animation-direction: unset; ``` @@ -36,13 +39,15 @@ animation-direction: unset; - `normal` - : アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。 - `reverse` - - : アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の `ease-in` が `ease-out` になります。 + - : アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、イージング関数も逆になります。例えば、イージング関数の `ease-in` が `ease-out` になります。 - `alternate` - : アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。 - `alternate-reverse` - : アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。 -> **メモ:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations) を作成するとき、 `animation-direction` を指定すると期待通りに動作します。例えば、`reverse` を指定すると、タイムラインの進行の過程でアニメーションが逆に実行されます。alternate`の値（{{cssxref("animation-iteration-count")}}と結合子）を指定すると、タイムラインの進行に合わせてアニメーションを前後に実行させます。 ## 公式定義 @@ -70,6 +75,9 @@ animation-direction: unset; border-radius: 10px; width: 100px; height: 100px; +} + +.box:hover { animation-name: rotate; animation-duration: 0.7s; animation-direction: reverse; @@ -87,9 +95,9 @@ animation-direction: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +{{EmbedLiveSample("逆方向に実行されるアニメーション","100%","250")}} -[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +例については [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -101,5 +109,6 @@ animation-direction: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From 9d23cb8bdd1b92583c97344631c9add0dae78d4c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 02:03:57 +0900 Subject: [PATCH 016/335] =?UTF-8?q?2023/07/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-duration/index.md | 37 ++++++++++++++++---- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/animation-duration/index.md b/files/ja/web/css/animation-duration/index.md index 0caa0b0903638c..dd91ff09d029a8 100644 --- a/files/ja/web/css/animation-duration/index.md +++ b/files/ja/web/css/animation-duration/index.md @@ -1,6 +1,8 @@ --- title: animation-duration slug: Web/CSS/animation-duration +l10n: + sourceCommit: 762f2305c59bd38ddd10a55b4909de7e07180f84 --- {{CSSRef}} @@ -15,6 +17,7 @@ slug: Web/CSS/animation-duration ```css /* 単一のアニメーション */ +animation-duration: auto; /* 既定値 */ animation-duration: 6s; animation-duration: 120ms; @@ -26,17 +29,31 @@ animation-duration: 10s, 35s, 230ms; animation-duration: inherit; animation-duration: initial; animation-duration: revert; +animation-duration: revert-layer; animation-duration: unset; ``` ### 値 +- `auto` {{Experimental_Inline}} + + - : 時間ベースのアニメーションでは、 `auto` は `0s` の値と等価です（下記参照）。 [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)では、 `auto` はタイムライン全体をアニメーションで埋めます。 + - `{{cssxref("<time>")}}` - - : 1 回のアニメーションの周期にかかる時間。この値は、秒 (`s`) またはミリ秒 (`ms`) で指定することができます。値は正の数か 0 でなければならず、単位は必須です。 `0s` の値は、既定値ですが、アニメーションを実行しないことを意味します。 + + - : 1 回のアニメーションの周期にかかる時間。この値は、秒 (`s`) またはミリ秒 (`ms`) で指定することができます。値は正の数か 0 でなければならず、単位は必須です。 + + 値が指定されなかった場合、既定値である `0s` が使用され、この場合でもアニメーションは実行されます（[`animationStart`](/ja/docs/Web/API/Element/animationstart_event) と [`animationEnd`](/ja/docs/Web/API/Element/animationend_event) イベントが発生します）。長さが `0s` のときにアニメーションが表示されるかどうかは、下記で説明する [`animation-fill-mode`](/ja/docs/Web/CSS/animation-fill-mode) の値によります。 + + - `animation-fill-mode` を `backwards` または `both` に設定した場合、 `animation-direction` で定義したアニメーションの最初のフレームが `animation-delay`(/ja/docs/Web/CSS/animation-delay) のカウントダウン中に表示されます。 + - `animation-fill-mode` が `forwards` または `both` に設定した場合、アニメーションの最後のフレームは `animation-delay` が経過した後に、 `animation-direction` で定義したように表示されます。 + - `animation-fill-mode` を `none` に設定すると、アニメーションは目に見える効果はありません。 > **メモ:** 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。 -> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成するとき、`animation-duration` の値を秒やミリ秒で指定することは実際には意味がありません。テストしたところ、スクロール進行タイムラインアニメーションには効果がないように見えましたが、ビュー進行タイムラインアニメーションでは、アニメーションがタイムラインの終わりに近づいて起こるようになるようでした。しかし、Firefox がアニメーションを正常に適用するには `animation-duration` の設定が要求されます。そのため、Firefoxでアニメーションが動作するように `animation-duration` を `1ms` に設定することをお勧めします。 ## 公式定義 @@ -48,7 +65,9 @@ animation-duration: unset; ## 例 -### animation-duration が 0.7 秒のアニメーション +### アニメーション時間の設定 + +これは animation-duration が 0.7 秒のアニメーションです。 #### HTML @@ -64,6 +83,9 @@ animation-duration: unset; border-radius: 10px; width: 100px; height: 100px; +} + +.box:hover { animation-name: rotate; animation-duration: 0.7s; } @@ -80,9 +102,11 @@ animation-duration: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +矩形の上にカーソルを当てると、アニメーションを開始します。 + +{{EmbedLiveSample("Setting animation duration","100%","250")}} -[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +他の例については、 [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -94,5 +118,6 @@ animation-duration: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From c962a664c6b3b1c3003b68a65a92de3e3aaa6bf7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 02:09:17 +0900 Subject: [PATCH 017/335] =?UTF-8?q?2023/06/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-fill-mode/index.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/files/ja/web/css/animation-fill-mode/index.md b/files/ja/web/css/animation-fill-mode/index.md index b37b01a4f0ac7a..0a8354134e28f1 100644 --- a/files/ja/web/css/animation-fill-mode/index.md +++ b/files/ja/web/css/animation-fill-mode/index.md @@ -1,6 +1,8 @@ --- title: animation-fill-mode slug: Web/CSS/animation-fill-mode +l10n: + sourceCommit: 34bc6ac7c5d03e5891bf94b0d4ebeccb0e7a29e5 --- {{CSSRef}} @@ -28,6 +30,7 @@ animation-fill-mode: both, forwards, none; animation-fill-mode: inherit; animation-fill-mode: initial; animation-fill-mode: revert; +animation-fill-mode: revert-layer; animation-fill-mode: unset; ``` @@ -60,7 +63,9 @@ animation-fill-mode: unset; - `both` - : アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。 -> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** `animation-fill-mode` は [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成するときに、通常の時間ベースのアニメーションと同じ効果があります。 ## 公式定義 @@ -72,6 +77,8 @@ animation-fill-mode: unset; ## 例 +### fill モードの設定 + 以下の例で `animation-fill-mode` の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。 ### HTML @@ -115,9 +122,9 @@ animation-fill-mode: unset; ### 結果 -{{EmbedLiveSample('Examples',700,300)}} +{{EmbedLiveSample('Setting fill mode',700,300)}} -これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -129,5 +136,6 @@ animation-fill-mode: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From 0b4d0fff6ed22dff8862c48c03cb65a2cfc4823b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 11:17:05 +0900 Subject: [PATCH 018/335] =?UTF-8?q?2023/06/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/animation-iteration-count/index.md | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/files/ja/web/css/animation-iteration-count/index.md b/files/ja/web/css/animation-iteration-count/index.md index 8f1a267fc6d3ec..722eefcd910e80 100644 --- a/files/ja/web/css/animation-iteration-count/index.md +++ b/files/ja/web/css/animation-iteration-count/index.md @@ -1,14 +1,14 @@ --- title: animation-iteration-count slug: Web/CSS/animation-iteration-count +l10n: + sourceCommit: 34bc6ac7c5d03e5891bf94b0d4ebeccb0e7a29e5 --- {{CSSRef}} **`animation-iteration-count`** は [CSS](/ja/docs/Web/CSS) のプロパティで、停止するまでにアニメーション周期が再生される回数を指定します。 -複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の 1 つが使用されたら最初に戻ります。 - {{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}} アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。 @@ -30,6 +30,7 @@ animation-iteration-count: 2, 0, infinite; animation-iteration-count: inherit; animation-iteration-count: initial; animation-iteration-count: revert; +animation-iteration-count: revert-layer; animation-iteration-count: unset; ``` @@ -42,7 +43,9 @@ animation-iteration-count: unset; - `{{cssxref("<number>")}}` - : アニメーションが繰り返される回数です。既定値は `1` です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 `0.5` はアニメーション周期の半分を再生します。負の数は無効です。 -> **メモ:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成するとき、 `animation-iteration-count` を指定すると、進行タイムラインの進行に伴ってその回数だけアニメーションが繰り返されます。もし `animation-iteration-count` が指定されなかった場合、アニメーションは一度しか発生しません。 `infinite` はスクロール駆動のアニメーションには有効な値ですが、アニメーションはうまく動作しません。 ## 公式定義 @@ -54,7 +57,9 @@ animation-iteration-count: unset; ## 例 -### 10 回実行されるアニメーション +### 繰り返し回数を設定 + +10 回実行されるアニメーション #### HTML @@ -70,6 +75,9 @@ animation-iteration-count: unset; border-radius: 10px; width: 100px; height: 100px; +} + +.box:hover { animation-name: rotate; animation-duration: 0.7s; animation-iteration-count: 10; @@ -87,9 +95,11 @@ animation-iteration-count: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +矩形にポインターを当てるとアニメーションが始まります。 + +{{EmbedLiveSample("Setting iteration count","100%","250")}} -[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +[CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -101,5 +111,6 @@ animation-iteration-count: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From fd89f3dbd2cbf57c66da4f20c68a47049d2673f8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 11:55:12 +0900 Subject: [PATCH 019/335] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-name/index.md | 25 +++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/files/ja/web/css/animation-name/index.md b/files/ja/web/css/animation-name/index.md index c5a4ae4077e326..11dd09b4908859 100644 --- a/files/ja/web/css/animation-name/index.md +++ b/files/ja/web/css/animation-name/index.md @@ -1,11 +1,13 @@ --- title: animation-name slug: Web/CSS/animation-name +l10n: + sourceCommit: 2adfb8760ac42c80966080e2e84211b14e43b589 --- {{CSSRef}} -**`animation-name`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に適用される 1 つまたは複数のアニメーションを記述する {{cssxref("@keyframes")}} アットルールの名前を指定します。 +**`animation-name`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に適用されるアニメーションを記述する 1 つまたは複数の {{cssxref("@keyframes")}} アットルールの名前を指定します。複数の `@keyframe` アットルールをカンマ区切りの文字列で指定します。指定した名前がどの `@keyframe` アットルールにも一致しない場合、プロパティはアニメーションしません。 {{EmbedInteractiveExample("pages/css/animation-name.html")}} @@ -28,9 +30,10 @@ animation-name: sliding; /* グローバル値 */ -animation-name: initial; animation-name: inherit; +animation-name: initial; animation-name: revert; +animation-name: revert-layer; animation-name: unset; ``` @@ -41,7 +44,7 @@ animation-name: unset; - {{cssxref("<custom-ident>")}} - : アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 `a` から `z`、 数字 `0` から `9`、 アンダースコア (`_`)、 ダッシュ (`-`) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は `none`, `unset`, `initial`, `inherit` であってはなりません。 -> **メモ:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 ## 公式定義 @@ -53,7 +56,9 @@ animation-name: unset; ## 例 -### animation-name が rotate であるアニメーション +### アニメーションに名前を付ける + +このアニメーションは `animation-name` を `rotate` としています。 #### HTML @@ -69,6 +74,9 @@ animation-name: unset; border-radius: 10px; width: 100px; height: 100px; +} + +.box:hover { animation-name: rotate; animation-duration: 0.7s; } @@ -85,9 +93,11 @@ animation-name: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +矩形にポインターを当てるとアニメーションが始まります。 + +{{EmbedLiveSample("Naming an animation","100%","250")}} -例については[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +例については [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -99,5 +109,6 @@ animation-name: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From 43b8772b233fa2e0817de6a29b9ebd8e5f6da592 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 11:59:14 +0900 Subject: [PATCH 020/335] =?UTF-8?q?2023/07/18=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/animation-play-state/index.md | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/animation-play-state/index.md b/files/ja/web/css/animation-play-state/index.md index 7367c788978a4c..204189770cd784 100644 --- a/files/ja/web/css/animation-play-state/index.md +++ b/files/ja/web/css/animation-play-state/index.md @@ -1,6 +1,8 @@ --- title: animation-play-state slug: Web/CSS/animation-play-state +l10n: + sourceCommit: 2adfb8760ac42c80966080e2e84211b14e43b589 --- {{CSSRef}} @@ -25,6 +27,7 @@ animation-play-state: paused, running, running; animation-play-state: inherit; animation-play-state: initial; animation-play-state: revert; +animation-play-state: revert-layer; animation-play-state: unset; ``` @@ -35,7 +38,7 @@ animation-play-state: unset; - `paused` - : **アニメーション**が現在**停止中**です。 -> **メモ:** `animation-*` プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values) を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 ## 公式定義 @@ -47,7 +50,9 @@ animation-play-state: unset; ## 例 -### 停止中のアニメーション +### アニメーションの停止 + +このアニメーションは停止していますが、ポインターを当てると実行されます。 #### HTML @@ -65,9 +70,14 @@ animation-play-state: unset; height: 100px; animation-name: rotate; animation-duration: 0.7s; + animation-iteration-count: infinite; animation-play-state: paused; } +.box:hover { + animation-play-state: running; +} + @keyframes rotate { 0% { transform: rotate(0); @@ -80,9 +90,11 @@ animation-play-state: unset; #### 結果 -{{EmbedLiveSample("Examples","100%","250")}} +矩形にポインターを当てるとアニメーションが始まります。 + +{{EmbedLiveSample("Pausing an animation","100%","250")}} -例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +例については [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -94,5 +106,6 @@ animation-play-state: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) -- JavaScript の {{domxref("AnimationEvent")}} API +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) +- JavaScript {{domxref("AnimationEvent")}} API +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}} From 5005e476e91c8d53ff0120e426bbbdd1655f91ee Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 12:27:13 +0900 Subject: [PATCH 021/335] =?UTF-8?q?2023/06/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=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/web/css/animation-range-end/index.md | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ja/web/css/animation-range-end/index.md diff --git a/files/ja/web/css/animation-range-end/index.md b/files/ja/web/css/animation-range-end/index.md new file mode 100644 index 00000000000000..5b1f3d5f6bfe65 --- /dev/null +++ b/files/ja/web/css/animation-range-end/index.md @@ -0,0 +1,176 @@ +--- +title: animation-range-end +slug: Web/CSS/animation-range-end +l10n: + sourceCommit: 2adfb8760ac42c80966080e2e84211b14e43b589 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`animation-range-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の終わり、つまり、タイムラインに沿ったアニメーションの終わりを設定するために使用します。 + +`animation-range-end` および {{cssxref("animation-range-start")}} のプロパティは、 [`animation-range`](/ja/docs/Web/CSS/animation-range) 一括指定プロパティを使用して設定することもできます。 + +> **メモ:** {{cssxref("animation-range-end")}} はリセット専用の値として {{cssxref("animation")}} の一括指定に含まれています。これは、`animation` を記載することで、前回宣言した `animation-range-end` の値が `normal` にリセットされることを意味していますが、`animation` によって固有の値を設定することはできません。 [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成する際には、 `animation` の一括指定を宣言した後に `animation-range-end` を宣言しないと、その効果を得ることができません。 + +## 構文 + +```css +/* キーワードまたは長さのパーセント値 */ +animation-range-end: normal; +animation-range-end: 80%; +animation-range-end: 700px; + +/* 名前付きタイムライン範囲の値 */ +animation-range-end: cover; +animation-range-end: contain; +animation-range-end: cover 80%; +animation-range-end: contain 700px; +``` + +### 値 + +`animation-range-end` に指定できる値は `normal`、{{cssxref("length-percentage")}}、``、`` のいずれかとそれに続く `` です。利用できる値の詳細については [`animation-range`](/ja/docs/Web/CSS/animation-range) を参照してください。 + +また、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) も調べてみてください。異なる値が意味していることを、簡単なビジュアル形式で正確に表示させることができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 範囲の終わりを指定した進行タイムラインの作成 + +`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。 +これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。 + +アニメーションを予定より早く終わらせるために、 `animation-range-end` 宣言も設定します。 + +#### HTML + +この例の HTML は下記の通りです。 + +```html +
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam + quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat + interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat + vivamus at augue. +

+ +

+ Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate + dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna + duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus. + Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum + arcu vitae elementum curabitur vitae nunc sed velit. +

+ +
+ +

+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu + cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet + dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non + tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam + vel quam elementum. Nibh praesent tristique magna sit amet purus gravida + quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat + imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi + scelerisque. Netus et malesuada fames ac. +

+
+``` + +#### CSS + +`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。 + +```css +.subject { + width: 300px; + height: 200px; + margin: 0 auto; + background-color: deeppink; +} + +.content { + width: 75%; + max-width: 800px; + margin: 0 auto; +} + +p, +h1 { + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 3rem; +} + +p { + font-size: 1.5rem; + line-height: 1.5; +} +``` + +`subject` というクラスを持つ `
` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも早く終わるように `animation-range-end` 宣言も与えます。 + +最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。 + +```css +.animation { + view-timeline: --subjectReveal block; + animation-timeline: --subjectReveal; + + animation-name: appear; + animation-range-end: contain 50%; + animation-fill-mode: both; + animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */ +} + +@keyframes appear { + from { + opacity: 0; + transform: scaleX(0); + } + + to { + opacity: 1, + transform: scaleX(1); + } +} +``` + +#### 結果 + +スクロールすると、主体要素のアニメーションを確認することができます。 + +{{EmbedLiveSample("Creating a named view progress timeline with range end", "100%", "480px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) +- [`animation-range`](/ja/docs/Web/CSS/animation-range), [`animation-range-start`](/ja/docs/Web/CSS/animation-range-start) +- [`scroll-timeline`](/ja/docs/Web/CSS/scroll-timeline), [`scroll-timeline-axis`](/ja/docs/Web/CSS/scroll-timeline-axis), [`scroll-timeline-name`](/ja/docs/Web/CSS/scroll-timeline-name) +- {{cssxref("timeline-scope")}} +- [`view-timeline-inset`](/ja/docs/Web/CSS/view-timeline-inset) +- JavaScript の同等のもの: `rangeEnd` （{{domxref("Element.animate()")}} 呼び出しで利用可能） +- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations) From 94bde5e7d3903d9f3d6c7bbb61154361955d3805 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 12:37:09 +0900 Subject: [PATCH 022/335] =?UTF-8?q?2023/06/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation-range-end/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/animation-range-end/index.md b/files/ja/web/css/animation-range-end/index.md index 5b1f3d5f6bfe65..216456cceb3cd6 100644 --- a/files/ja/web/css/animation-range-end/index.md +++ b/files/ja/web/css/animation-range-end/index.md @@ -7,7 +7,7 @@ l10n: {{CSSRef}}{{SeeCompatTable}} -**`animation-range-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の終わり、つまり、タイムラインに沿ったアニメーションの終わりを設定するために使用します。 +**`animation-range-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の末尾、つまり、タイムラインに沿ったアニメーションの末尾を設定するために使用します。 `animation-range-end` および {{cssxref("animation-range-start")}} のプロパティは、 [`animation-range`](/ja/docs/Web/CSS/animation-range) 一括指定プロパティを使用して設定することもできます。 From ff746b0364ada4af23bc949f22ac5713f8a0d2cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 12:38:28 +0900 Subject: [PATCH 023/335] =?UTF-8?q?2023/06/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=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/animation-range-start/index.md | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ja/web/css/animation-range-start/index.md diff --git a/files/ja/web/css/animation-range-start/index.md b/files/ja/web/css/animation-range-start/index.md new file mode 100644 index 00000000000000..6a51e5d3194b79 --- /dev/null +++ b/files/ja/web/css/animation-range-start/index.md @@ -0,0 +1,176 @@ +--- +title: animation-range-start +slug: Web/CSS/animation-range-start +l10n: + sourceCommit: 2adfb8760ac42c80966080e2e84211b14e43b589 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`animation-range-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の先頭、つまり、タイムラインに沿ったアニメーションの先頭を設定するために使用します。 + +`animation-range-start` および {{cssxref("animation-range-end")}} のプロパティは、 [`animation-range`](/ja/docs/Web/CSS/animation-range) 一括指定プロパティを使用して設定することもできます。 + +> **メモ:** {{cssxref("animation-range-start")}} はリセット専用の値として {{cssxref("animation")}} の一括指定に含まれています。これは、`animation` を記載することで、前回宣言した `animation-range-start` の値が `normal` にリセットされることを意味していますが、`animation` によって固有の値を設定することはできません。 [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成する際には、 `animation` の一括指定を宣言した後に `animation-range-start` を宣言しないと、その効果を得ることができません。 + +## 構文 + +```css +/* キーワードまたは長さのパーセント値 */ +animation-range-start: normal; +animation-range-start: 80%; +animation-range-start: 700px; + +/* 名前付きタイムライン範囲の値 */ +animation-range-start: cover; +animation-range-start: contain; +animation-range-start: cover 80%; +animation-range-start: contain 700px; +``` + +### 値 + +`animation-range-start` に指定できる値は `normal`、{{cssxref("length-percentage")}}、``、`` のいずれかとそれに続く `` です。利用できる値の詳細については [`animation-range`](/ja/docs/Web/CSS/animation-range) を参照してください。 + +また、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) も調べてみてください。異なる値が意味していることを、簡単なビジュアル形式で正確に表示させることができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 範囲の終わりを指定した進行タイムラインの作成 + +`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。 +これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。 + +アニメーションを予定より遅く始めるために、 `animation-range-start` 宣言も設定します。 + +#### HTML + +この例の HTML は下記の通りです。 + +```html +
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam + quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat + interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat + vivamus at augue. +

+ +

+ Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate + dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna + duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus. + Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum + arcu vitae elementum curabitur vitae nunc sed velit. +

+ +
+ +

+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu + cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet + dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non + tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam + vel quam elementum. Nibh praesent tristique magna sit amet purus gravida + quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat + imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi + scelerisque. Netus et malesuada fames ac. +

+
+``` + +#### CSS + +`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。 + +```css +.subject { + width: 300px; + height: 200px; + margin: 0 auto; + background-color: deeppink; +} + +.content { + width: 75%; + max-width: 800px; + margin: 0 auto; +} + +p, +h1 { + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 3rem; +} + +p { + font-size: 1.5rem; + line-height: 1.5; +} +``` + +`subject` というクラスを持つ `
` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも遅く始めるように `animation-range-start` 宣言も与えます。 + +最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。 + +```css +.animation { + view-timeline: --subjectReveal block; + animation-timeline: --subjectReveal; + + animation-name: appear; + animation-range-start: entry 25%; + animation-fill-mode: both; + animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */ +} + +@keyframes appear { + from { + opacity: 0; + transform: scaleX(0); + } + + to { + opacity: 1, + transform: scaleX(1); + } +} +``` + +#### 結果 + +スクロールすると、主体要素のアニメーションを確認することができます。 + +{{EmbedLiveSample("Creating a named view progress timeline with range start", "100%", "480px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) +- [`animation-range`](/ja/docs/Web/CSS/animation-range), [`animation-range-end`](/ja/docs/Web/CSS/animation-range-end) +- [`scroll-timeline`](/ja/docs/Web/CSS/scroll-timeline), [`scroll-timeline-axis`](/ja/docs/Web/CSS/scroll-timeline-axis), [`scroll-timeline-name`](/ja/docs/Web/CSS/scroll-timeline-name) +- {{cssxref("timeline-scope")}} +- [`view-timeline-inset`](/ja/docs/Web/CSS/view-timeline-inset) +- JavaScript の同等のもの: `rangeStart` （{{domxref("Element.animate()")}} 呼び出しで利用可能） +- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations) From 5e6198bb5691977af20effaac015d36d9cd91dd8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 16:17:48 +0900 Subject: [PATCH 024/335] =?UTF-8?q?2023/07/10=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=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/web/css/animation-range/index.md | 230 ++++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 files/ja/web/css/animation-range/index.md diff --git a/files/ja/web/css/animation-range/index.md b/files/ja/web/css/animation-range/index.md new file mode 100644 index 00000000000000..d9842ccc51e413 --- /dev/null +++ b/files/ja/web/css/animation-range/index.md @@ -0,0 +1,230 @@ +--- +title: animation-range +slug: Web/CSS/animation-range +l10n: + sourceCommit: b03632b84049c5110d9ee466307f7e2d28959be5 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`animation-range`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、タイムラインに沿ったアニメーションの適用範囲の先頭と末尾を設定します。つまり、タイムラインのどこでアニメーションが始まり、どこで終わるかを設定するために使用します。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`animation-range-start`](/ja/docs/Web/CSS/animation-range-start) +- [`animation-range-end`](/ja/docs/Web/CSS/animation-range-end) + +## 構文 + +```css +/* キーワードまたは長さのパーセント値 */ +animation-range: normal; /* normal normal と同等 */ +animation-range: 20%; /* 20% normal と同等 */ +animation-range: 100px; /* 100px normal と同等 */ + +/* 単一の名前付きタイムライン範囲の値 */ +animation-range: cover; /* cover 0% cover 100% と同等 */ +animation-range: contain; /* contain 0% contain 100% と同等 */ +animation-range: cover 20%; /* cover 20% cover 100% と同等 */ +animation-range: contain 100px; /* contain 100px cover 100% と同等 */ + +/* 2 つの値で範囲の先頭と末尾 */ +animation-range: normal 25%; +animation-range: 25% normal; +animation-range: 25% 50%; +animation-range: entry exit; /* entry 0% exit 100% と同等 */ +animation-range: cover cover 200px; /* cover 0% cover 200px と同等 */ +animation-range: entry 10% exit; /* entry 10% exit 100% と同等 */ +animation-range: 10% exit 90%; +animation-range: entry 10% 90%; +``` + +`animation-range` の一括指定では、コンテナー要素に `` と `` の値の組み合わせを適用することができます。両方の値を指定した場合、 ``、`` の順に解釈されます。 + +上の構文ブロックのコメントで示したように、 1 つの値しか提供されなかった場合、いくつかの解釈の可能性があります。 + +- その値が {{cssxref("length-percentage")}} または `normal` である場合、 `` はその値を取り、 `` は `normal` と等しくなります。 +- その値が `` 以下が続かない名前付きタイムラインの範囲である場合、その範囲はその名前付きタイムラインの範囲の 0% と 100% の間になります。 +- もし値が `` 以下の名前付きタイムライン範囲であれば、範囲はその名前付きタイムライン範囲の指定したパーセント値で始まり、その名前付きタイムライン範囲の 100% で終わります。 + +### 値 + +[`animation-range-start`](/ja/docs/Web/CSS/animation-range-start) や [`animation-range-end`](/ja/docs/Web/CSS/animation-range-end) を表す 1 つまたは 2 つの値です。これらの値は以下のいずれかになります。 + +- `normal` + - : `animation-range-start` の場合はタイムラインの始まり、 `animation-range-end` の場合はタイムラインの終わりを表します。これが既定値です。 +- `` + - : タイムラインの始めからの長さまたはパーセント値。 +- `` + + - : 全体のタイムライン内の固有のタイムライン範囲です。可能な値は次の通りです。 + + - `cover` + - : 名前付きビュー進行タイムラインの全範囲を表します（詳細は [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を参照）。主体要素が最初にスクロールポートのビュー進行の可視範囲に入り始めた時点（進行度 0%）から、完全にその範囲から離れた時点（進行度 100%）までです。 + - `contain` + - : 名前付きビュー進行タイムラインの範囲で、主体要素がスクロールポートのビュー進行状況の可視範囲に完全に収まっている、または完全に格納している範囲を表します。 + - 主体要素がスクロールポートより小さい場合は、主体要素が最初にスクロールポートに完全に収まった点（進行度 0%）から、スクロールポートに完全に収まらなくなった点（進行度 100%）までの範囲になります。 + - 主体要素がスクロールポートより大きい場合は、主体要素が最初にスクロールポートに完全に応じた点（進行度 0%）から、スクロールポートに完全に応じた点（進行度 100%）まで、この範囲になります。 + - `entry` + - : 名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートに入り始めた点（進行度 0%）から、完全にスクロールポートに入った点（進行度 100%）までを表します。 + - `exit` + - : 名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートを出始めた点（進行度 0%）から、完全にスクロールポートを出た点（進行度 100%）までを表します。 + - `entry-crossing` + - : 名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートの始点を横切り始めた点（進行度 0%）から、完全にスクロールポートの始点を横切った点（進行度 100%）までを表します。 + - `exit-crossing` + - : 名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートの終端を横切り始めた点（進行度 0%）から、 スクロールポートの終端を完全に横切った点（進行度 100%）までを表します。 + + `` の値に `` が含まれていない場合、それが `animation-range-start` の値であれば `0%`、`animation-range-end` の値であれば `100%` が既定値になります。 + + > **メモ:** 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) はこれらが意味していることを視覚的に分かりやすく表示してくれます。 + +- ` ` + - : 指定したタイムライン範囲の開始から測定された、指定したタイムライン範囲内の指定したパーセント値または距離に等しい組み合わせ値。 + +> **メモ:** スクロールポート（詳細は{{glossary("Scroll container", "スクロールコンテナー")}}を参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 {{cssxref("view-timeline-inset")}} プロパティを使用して調整することができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### View Timeline Ranges Visualizer + +[View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) では、すべての値のタイプの意味を視覚的にわかりやすく説明しています。 + +### 範囲を指定した名前付き進行タイムラインの作成 + +`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。 +これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。 + +`animation-range` 宣言も設定することで、アニメーションの開始を遅くし、終了を早くすることができます。 + +#### HTML + +この例の HTML は以下の通りです。 + +```html +
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam + quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat + interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat + vivamus at augue. +

+ +

+ Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate + dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna + duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus. + Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum + arcu vitae elementum curabitur vitae nunc sed velit. +

+ +
+ +

+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu + cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet + dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non + tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam + vel quam elementum. Nibh praesent tristique magna sit amet purus gravida + quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat + imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi + scelerisque. Netus et malesuada fames ac. +

+
+``` + +#### CSS + +`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。 + +```css +.subject { + width: 300px; + height: 200px; + margin: 0 auto; + background-color: deeppink; +} + +.content { + width: 75%; + max-width: 800px; + margin: 0 auto; +} + +p, +h1 { + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 3rem; +} + +p { + font-size: 1.5rem; + line-height: 1.5; +} +``` + +`subject` というクラスを持つ `
` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも遅く始めるように `animation-range-start` 宣言も与えます。 + +最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。 + +```css +.animation { + view-timeline: --subjectReveal block; + animation-timeline: --subjectReveal; + + animation-name: appear; + animation-range: entry 10% contain 25%; + animation-fill-mode: both; + animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */ +} + +@keyframes appear { + from { + opacity: 0; + transform: scaleX(0); + } + + to { + opacity: 1, + transform: scaleX(1); + } +} +``` + +#### 結果 + +スクロールすると、主体要素のアニメーションを確認することができます。 + +{{EmbedLiveSample("Creating a named view progress timeline with range", "100%", "480px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) +- [`animation-range-end`](/ja/docs/Web/CSS/animation-range-end), [`animation-range-start`](/ja/docs/Web/CSS/animation-range-start) +- [`scroll-timeline`](/ja/docs/Web/CSS/scroll-timeline), [`scroll-timeline-axis`](/ja/docs/Web/CSS/scroll-timeline-axis), [`scroll-timeline-name`](/ja/docs/Web/CSS/scroll-timeline-name) +- {{cssxref("timeline-scope")}} +- [`view-timeline-inset`](/ja/docs/Web/CSS/view-timeline-inset) +- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations) From f3b554cf286d8b05101d91125427efcc22cb3af3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 16:25:54 +0900 Subject: [PATCH 025/335] =?UTF-8?q?2023/10/08=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/animation-timing-function/index.md | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/files/ja/web/css/animation-timing-function/index.md b/files/ja/web/css/animation-timing-function/index.md index 3c134acf212bc6..53f888c7a06046 100644 --- a/files/ja/web/css/animation-timing-function/index.md +++ b/files/ja/web/css/animation-timing-function/index.md @@ -1,6 +1,8 @@ --- title: animation-timing-function slug: Web/CSS/animation-timing-function +l10n: + sourceCommit: b81ce97c7b37b6339c95cf7a0ee0b72963dd0186 --- {{CSSRef}} @@ -42,20 +44,17 @@ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1); animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: revert; +animation-timing-function: revert-layer; animation-timing-function: unset; ``` -タイミング関数は [@keyframes](/ja/docs/Web/CSS/@keyframes) ルール内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに **`animation-timing-function`** が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から **`animation-timing-function`** の適切な値が使用されます。 - -キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 **`animation-timing-function`** のうち **`100%`** または **`to`** に指定したものは使用されません。 - ### 値 - {{cssxref("<easing-function>")}} - - : {{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。 + - : {{cssxref("animation-name")}} で定められた、アニメーションに対応するイージング関数です。 - ステップではないキーワード値 (ease, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ三次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。 + ステップではないキーワード値 (ease, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ三次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップイージング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。 - `ease` - : `cubic-bezier(0.25, 0.1, 0.25, 1.0)` と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。 @@ -78,7 +77,7 @@ animation-timing-function: unset; - `jump-end` - : アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。 - `jump-none` - - : どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。 + - : どちらの側でもジャンプは行わず、効果的に補間の反復処理中に段階が除去されます。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。 - `jump-both` - : 0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。 - `start` @@ -91,7 +90,15 @@ animation-timing-function: unset; - `step-end` - : `steps(1, jump-end)` と同じです。 -> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values)を参照してください。 +> **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 + +> **メモ:** `animation-timing-function` は、 [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)を作成するときに、通常の時間ベースのアニメーションと同じ効果があります。 + +## 解説 + +イージング関数は [@keyframes](/ja/docs/Web/CSS/@keyframes) ルール内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに **`animation-timing-function`** が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から **`animation-timing-function`** の適切な値が使用されます。 + +キーフレーム内では、`animation-timing-function` はアットルール固有の記述子であり、同名のプロパティではありません。時間ではアニメーションされません。むしろ、キーフレームのイージング関数は、それが指定されたキーフレームから、そのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する次のキーフレームがない場合はアニメーションが終わるまで、プロパティごとに適用されます。その結果、 **`animation-timing-function`** のうち **`100%`** または **`to`** に指定したものは使用されません。 ## 公式定義 @@ -243,7 +250,8 @@ animation-timing-function: unset; ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - {{cssxref('easing-function')}} - JavaScript の {{domxref("AnimationEvent")}} API - [cubic-bezier.com](https://cubic-bezier.com) +- その他のアニメーション関連プロパティ: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}} From 4358ac562734f79737b6bbf2f54c857e4d8514b8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 16:58:44 +0900 Subject: [PATCH 026/335] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/animation/index.md | 267 +++++++++++++++++++++------- 1 file changed, 199 insertions(+), 68 deletions(-) diff --git a/files/ja/web/css/animation/index.md b/files/ja/web/css/animation/index.md index 3f4ffdcee7a38b..6a14b24a9537fb 100644 --- a/files/ja/web/css/animation/index.md +++ b/files/ja/web/css/animation/index.md @@ -1,6 +1,8 @@ --- title: animation slug: Web/CSS/animation +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{CSSRef}} @@ -9,20 +11,6 @@ slug: Web/CSS/animation {{EmbedInteractiveExample("pages/css/animation.html")}} -```css -/* @keyframes duration | easing-function | delay | -iteration-count | direction | fill-mode | play-state | name */ -animation: 3s ease-in 1s 2 reverse both paused slidein; - -/* @keyframes name | duration | easing-function | delay */ -animation: slidein 3s linear 1s; - -/* @keyframes name | duration */ -animation: slidein 3s; -``` - -[アニメーションできるプロパティの説明](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#which_css_properties_are_animatable)があります。この説明は言うまでもなく [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)にも有効です。 - ## 構成要素のプロパティ このプロパティは以下のプロパティの一括指定です。 @@ -34,31 +22,47 @@ animation: slidein 3s; - [`animation-iteration-count`](/ja/docs/Web/CSS/animation-iteration-count) - [`animation-name`](/ja/docs/Web/CSS/animation-name) - [`animation-play-state`](/ja/docs/Web/CSS/animation-play-state) +- [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) - [`animation-timing-function`](/ja/docs/Web/CSS/animation-timing-function) ## 構文 +```css +/* @keyframes duration | easing-function | delay | +iteration-count | direction | fill-mode | play-state | name */ +animation: 3s ease-in 1s 2 reverse both paused slidein; + +/* @keyframes duration | easing-function | delay | name */ +animation: 3s linear 1s slidein; + +/* 2 つのアニメーション */ +animation: + 3s linear slidein, + 3s ease-out 5s slideout; +``` + `animation` プロパティは 1 つまたはカンマで区切った複数のアニメーションとして指定します。 それぞれ個別のアニメーションは以下のように定義されます。 +- 0 ～ 2 個の {{cssxref("<time>")}} の値 + - 以下の値は 0 ～ 1 回出現します。 - - {{cssxref("<single-transition-easing-function>")}} - - {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}} - - {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}} - - {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}} - - {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}} + - {{cssxref("animation", "<single-easing-function>", "#single-easing-function")}} + - {{cssxref("animation", "<single-animation-iteration-count>", "#single-animation-iteration-count")}} + - {{cssxref("animation", "<single-animation-direction>", "#single-animation-direction")}} + - {{cssxref("animation", "<single-animation-fill-mode>", "#single-animation-fill-mode")}} + - {{cssxref("animation", "<single-animation-play-state>", "#single-animation-play-state")}} - アニメーションの名前は任意で、 `none`, {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}} のいずれかになります。 -- 0 ～ 2 個の {{cssxref("<time>")}} の値 - -各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。 -順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。 +> **メモ:** {{cssxref("animation-timeline")}}、{{cssxref("animation-range-start")}}、{{cssxref("animation-range-end")}} は、現在の実装ではリセットのみであるため、現在のところこのリストには掲載されていません。つまり、 `animation` があると、それ以前に宣言した `animation-timeline` の値は `auto` に、それ以前に宣言した `animation-range-start` と `animation-range-end` の値は `normal` にリセットされますが、これらのプロパティを `animation` で設定することはできません。 [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations) を作成する場合、 `animation` の一括指定を宣言した後に、これらのプロパティを宣言しなければ効果を得ることはできません。 ### 値 +- `` + - : 推移の形式を決定します。値は {{cssxref("easing-function")}} で利用できる値のいずれかでなければなりません。 - `` - : アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。 - `` @@ -68,16 +72,26 @@ animation: slidein 3s; - `` - : アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。 +## 解説 + +それぞれのアニメーションの定義の中での順序は重要です。 {{cssxref("<time>")}} として解釈される最初の値は {{cssxref("animation-duration")}} に、そして 2 番目の値は、{{cssxref("animation-delay")}} に割り当てられます。 + +それぞれのアニメーション定義内の他の値の順序も、 {{cssxref("animation-name")}} 値と他の値を判別するために重要です。もし `animation` の一括指定の値が `animation-name` 以外のアニメーションプロパティの値として解釈できる場合、その値は最初のプロパティに適用され、 `animation-name` には適用されません。このため、 `animation` 一括指定を使用する場合は、値のリストの最後の値として `animation-name` の値を指定することをお勧めします。これは、`animation` 一括指定を使用してカンマで区切られた複数のアニメーションを指定する場合でも同様です。 + +アニメーションを適用するにはアニメーション名を設定する必要がありますが、`animation` 一括指定の値はすべてオプションで、それぞれの個別指定の `animation` 成分の既定値が設定されます。 `animation-name` の初期値は `none` です。つまり、`animation` 一括指定のプロパティで `animation-name` の値が宣言されていない場合、どのプロパティにもアニメーションは適用されません。 + +`animation-duration` 値が `animation` 一括指定プロパティにおいて除外された場合、このプロパティの値は `0s` が既定値となります。この場合、アニメーションは発生しますが（[`animationStart`](/ja/docs/Web/API/Element/animationstart_event) と [`animationEnd`](/ja/docs/Web/API/Element/animationend_event) イベントは発行されますが）、アニメーションは表示されません。 + ## アクセシビリティの考慮 点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。 -アニメーションを停止したり無効にしたりする仕組みを、できれば[動きを縮小するメディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。 +アニメーションを停止したり無効にしたりする仕組みを、できれば[動きを縮小するメディアクエリー](/ja/docs/Web/CSS/@media/prefers-reduced-motion)を使用して、アニメーションを削減した操作の設定を表明したユーザーの希望を叶えるように作成することができます。 -- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) +- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) - [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) - [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) -- [MDN Understanding WCAG, Guideline 2.2 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) +- [MDN WCAG を理解する、ガイドライン 2.2 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) - [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) ## 公式定義 @@ -90,66 +104,189 @@ animation: slidein 3s; ## 例 -### 台風の目 +> **メモ:** [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model) プロパティのアニメーションは推奨されません。ボックスモデルのプロパティをアニメーションさせると、本質的に CPU に負荷がかかります。 + +### 日の出 + +ここでは、水色の空を昇る黄色い太陽をアニメーション化しています。太陽は +ビューポートの中心まで上昇してから、下落して見えなくなります。 ```html -
-
Listening for dispatches
-
-
+
``` ```css -.polling_message { - color: white; - float: left; - margin-right: 2%; +:root { + overflow: hidden; /* 地平線下の部分の太陽を隠す */ + background-color: lightblue; + display: flex; + justify-content: center; /* 太陽を背景の中心に配置する */ +} + +.sun { + background-color: yellow; + border-radius: 50%; /* 丸い背景を作成 */ + height: 100vh; /* 太陽をビューポートの大きさにする */ + aspect-ratio: 1 / 1; + animation: 4s linear 0s infinite alternate sun-rise; } -.view_port { - background-color: black; - height: 25px; - width: 100%; +@keyframes sun-rise { + from { + /* ビューポートを通過して太陽を下に押し下げる */ + transform: translateY(110vh); + } + to { + /* 太陽を既定の位置に戻す */ + transform: translateY(0); + } +} +``` + +{{EmbedLiveSample('Sun_Rise')}} + +### 複数のプロパティのアニメーション + +前回の例の太陽のアニメーションに追加して、太陽が昇ったり沈んだりするときの色を変える 2 つ目のアニメーションを追加します。太陽が地平線の下にあるときは暗い赤色から始まり、上に近づくにつれて明るいオレンジ色に変わります。 + +```html +
+``` + +```css +:root { overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; } -.cylon_eye { - background-color: red; - background-image: linear-gradient( - to right, - rgba(0, 0, 0, 0.9) 25%, - rgba(0, 0, 0, 0.1) 50%, - rgba(0, 0, 0, 0.9) 75% - ); - color: white; - height: 100%; - width: 20%; - - -webkit-animation: 4s linear 0s infinite alternate move_eye; - animation: 4s linear 0s infinite alternate move_eye; +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + animation: 4s linear 0s infinite alternate animating-multiple-properties; } -@-webkit-keyframes move_eye { +/* 単一のアニメーションで複数のプロパティをアニメーションさせることができる */ +@keyframes animating-multiple-properties { from { - margin-left: -20%; + transform: translateY(110vh); + background-color: red; + filter: brightness(75%); } to { - margin-left: 100%; + transform: translateY(0); + background-color: orange; + /* 設定されていないプロパティ、つまり 'filter' は既定値に戻る */ } } -@keyframes move_eye { +``` + +{{EmbedLiveSample('Animating Multiple Properties')}} + +### 複数のアニメーションの適用 + +水色の背景に昇ったり沈んだりする太陽。太陽は徐々に虹色に回転します。太陽の位置と色のタイミングは独立しています。 + +```html +
+``` + +```css +:root { + overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; +} + +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + /* 複数のアニメーションをカンマで区切り、各アニメーションの引数を個別に設定 */ + animation: + 4s linear 0s infinite alternate rise, + 24s linear 0s infinite psychedelic; +} + +@keyframes rise { from { - margin-left: -20%; + transform: translateY(110vh); } to { - margin-left: 100%; + transform: translateY(0); + } +} + +@keyframes psychedelic { + from { + filter: hue-rotate(0deg); + } + to { + filter: hue-rotate(360deg); } } ``` -{{EmbedLiveSample('Cylon_Eye')}} +{{EmbedLiveSample('Applying Multiple Animations')}} -これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)を参照してください。 +### 複数のアニメーションのカスケード + +ここでは、水色の背景に黄色の太陽があります。太陽はビューポートの左側と右側の間で跳ね返ります。上昇アニメーションを定義しても、太陽はビューポートに残ります。上昇アニメーションの座標変換プロパティは、跳ね返るアニメーションによって「上書き」されます。 + +```html +
+``` + +```css +:root { + overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; +} + +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + /* + カスケードの後半で宣言されたアニメーションは、 + それ以前に宣言されたアニメーションのプロパティを上書きする + */ + /* 跳ね返りは上昇の座標変換を「上書き」するため、太陽は水平方向にしか移動しない */ + animation: + 4s linear 0s infinite alternate rise, + 4s linear 0s infinite alternate bounce; +} + +@keyframes rise { + from { + transform: translateY(110vh); + } + to { + transform: translateY(0); + } +} + +@keyframes bounce { + from { + transform: translateX(-50vw); + } + to { + transform: translateX(50vw); + } +} +``` + +{{EmbedLiveSample('Cascading Multiple Animations')}} + +これ以外の例は [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 ## 仕様書 @@ -159,13 +296,7 @@ animation: slidein 3s; {{Compat}} -### Quantum CSS のメモ - -- Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ([Firefox バグ 1383239](https://bugzil.la/1383239))。これは Firefox の新しい並列 CSS エンジン（[Quantum CSS](https://wiki.mozilla.org/Quantum) または [Stylo](https://wiki.mozilla.org/Quantum/Stylo) と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。 -- 他の Gecko のバグとして、 {{htmlelement("details")}} 要素が `open` 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ([Firefox バグ 1382124](https://bugzil.la/1382124))。 Quantum CSS では修正されています。 -- さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ([Firefox バグ 1254424](https://bugzil.la/1254424))。 Quantum CSS では修正されています。 - ## 関連情報 -- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations) - JavaScript の {{domxref("AnimationEvent")}} API From 7087dfd08271277a2bb1e41e377c5d14396079f1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Jan 2024 17:13:47 +0900 Subject: [PATCH 027/335] =?UTF-8?q?#17860=20=E3=81=A7=E5=89=8A=E9=99=A4?= =?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=9F=E8=A8=98=E4=BA=8B=E3=82=92=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 6 +- files/ja/_wikihistory.json | 4 - .../ja/conflicting/glossary/flexbox/index.md | 108 ------------------ 3 files changed, 3 insertions(+), 115 deletions(-) delete mode 100644 files/ja/conflicting/glossary/flexbox/index.md diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 5d544eb52cc717..1d54d1fdac80a2 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3584,9 +3584,9 @@ /ja/docs/Web/CSS/CSS_Columns/Styling_Columns /ja/docs/Web/CSS/CSS_multicol_layout/Styling_columns /ja/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ja/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /ja/docs/Web/CSS/CSS_Device_Adaptation /ja/docs/Web/CSS -/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox /ja/docs/conflicting/Glossary/Flexbox +/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox /ja/docs/Glossary/Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax /ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis -/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /ja/docs/conflicting/Glossary/Flexbox +/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins /ja/docs/Glossary/Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox /ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /ja/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts @@ -3634,7 +3634,7 @@ /ja/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property /ja/docs/conflicting/Web/CSS/cursor /ja/docs/Web/CSS/CSS_Variables /ja/docs/Web/CSS/CSS_cascading_variables /ja/docs/Web/CSS/CSS_charsets /ja/docs/Web/CSS/CSS_syntax -/ja/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox /ja/docs/conflicting/Glossary/Flexbox +/ja/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox /ja/docs/Glossary/Flexbox /ja/docs/Web/CSS/CSS_transforms_の利用 /ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms /ja/docs/Web/CSS/CSS_values_serialization /ja/docs/Web/CSS /ja/docs/Web/CSS/CSS_values_syntax /ja/docs/Web/CSS diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index b1fcb51ff8055a..f06e13ceddfdb7 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -30130,10 +30130,6 @@ "modified": "2020-07-17T23:22:13.809Z", "contributors": ["papparapa", "silverskyvicto"] }, - "conflicting/Glossary/Flexbox": { - "modified": "2020-08-14T09:23:43.070Z", - "contributors": ["mfuji09", "Uemmra3", "sutara79"] - }, "conflicting/MDN/MDN_Product_Advisory_Board": { "modified": "2020-03-14T06:36:03.749Z", "contributors": ["mfuji09", "silverskyvicto"] diff --git a/files/ja/conflicting/glossary/flexbox/index.md b/files/ja/conflicting/glossary/flexbox/index.md deleted file mode 100644 index 00c368140f4ffb..00000000000000 --- a/files/ja/conflicting/glossary/flexbox/index.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: フレックスボックスの後方互換性 -slug: conflicting/Glossary/Flexbox -original_slug: Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox ---- - -{{CSSRef}} - -最新のブラウザーはフレックスボックスにとてもよく対応していますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策や代替を作成するための方法を見ていきます。 - -## フレックスボックスの歴史 - -すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。 - -フレックスボックスは、いくつかのウェブブラウザーに実験的に実装されていました。当時、実験的な実装を行うための方法として、ベンダー接頭辞を使用していました。この接頭辞の考え方は、他の実装と衝突することなく、ブラウザのエンジニアやウェブ開発者が仕様の実装をテストし、検討できるようにすることでした。実験的に実装されたものを本番コードで使用することはないという考えでした。しかし、最終的には本番コードでも接頭辞が使用されるようになり、実験的な仕様の変更に伴い、サイトを更新する必要が出てきました。 - -[2009 年時点の仕様](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)は、今とはだいぶ異なります。フレックスコンテナーの生成するには `display: box` を使い、数々の `box-*` プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。 - -[仕様変更](https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)によって構文が `display: flexbox` へと変わりました。これもベンダー接頭辞つきでした。 - -最終的には、フレックスコンテナーの作成には `display: flex` を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。 - -古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 `display: box` や `display: flexbox` ならば、それは古い情報です。 - -## ブラウザーの状況 - -フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。 - -## よくある問題 - -フレックスボックスに関する問題の大半は、開発中だった頃の仕様変更や、実験段階の仕様を本番で使おうとすることに関連しています。古いバージョンのブラウザー（特に IE10 と 11）との下位互換性を確保しようとしている場合は、 [Flexbugs](https://github.com/philipwalton/flexbugs) のサイトが参考になります。掲載されているバグの多くは、古いブラウザーのバージョンに適用され、現行のブラウザーでは修正されていることがわかります。それぞれのバグには回避策が記載されているので、何時間も悩む必要はありません。 - -非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。 - -```css -.wrapper { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} -``` - -[Autoprefixer Online](https://autoprefixer.github.io/) は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、[Can I Use](https://caniuse.com/#feat=flexbox) では、ブラウザーで接頭辞が削除された時期を調べることができます。 - -## 有用な代替方法 - -フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることで代替とすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。 - -### 浮動アイテム - -> 「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - [3. Flex Containers](https://www.w3.org/TR/css-flexbox-1/#flex-containers) - -下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナーに `display: flex` を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。 - -代替の挙動を試すには、ラッパーから `display: flex` を削除してください。 - -{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}} - -### display: inline-block - -`inline-block` のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に余白が保持されるような `display: inline-block` の効果が現れなくなります。 - -`display: flex` を削除して代替の挙動を確認してください。アイテム間に余白が追加されるはずです。これはインライン要素や `display: inine-block` を指定した要素の挙動と同じです。 - -{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}} - -### display: table- - -CSS のテーブル表示のプロパティは、代替としてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばしたり、縦方向に中央揃えするなどのデザインパターンが可能だからです。 - -アイテムに `display: table-cell` を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS では、これらの項目を表す無名のボックスを作成し、各項目を HTML のテーブルの行を表すラッパーとテーブル要素自体を表すラッパーで包む必要がないようにしています。これらの無名のボックスは、見ることもできないし、スタイルを決めることもできません。単にツリー構造を補うためのものなのです。 - -親要素に `display: flex` を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナーの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。 - -> 「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - [4. Flex Items](https://www.w3.org/TR/css-flexbox-1/#flex-items) - -{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}} - -### vertical-align プロパティ - -下記のライブサンプルでは、`display: inline-block` の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、`display: table-cell` と `display: inline-block` のどちらにも指定できます。`vertical-align` による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスでは無視されるので、代替として `display: table-cell` や `display: inline-block` とともに使用できます。それによってフレックスボックスの配置プロパティが悪影響を受けることはありません。 - -{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}} - -## 機能クエリーとフレックスボックス - -下記のように、フレックスボックスに対応しているかどうかを[機能クエリー](/ja/docs/Web/CSS/@supports)で検査できます。 - -```css -@supports (display: flex) { - /* 対応しているブラウザー向けのコード */ -} -``` - -ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリーにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリーは UC Browser を含みます。 UC Browser は機能クエリーと接頭辞付きの古い構文に対応しています。 - -```css -@supports (display: flex) or (display: -webkit-box) { - /* 対応しているブラウザー向けのコード */ -} -``` - -機能クエリーについて詳しく知りたい場合は、Mozilla Hacks ブログの [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) をご覧ください。 - -## 終わりに - -このガイドでは、潜在的な問題や代替について説明してきましたが、フレックスボックスはすぐにでも本番で使用できる状態になっています。このガイドは、問題が発生した場合や古いブラウザーに対応する必要がある場合に役立ちます。 From c9ad31c17c95099e92b218e309a8ae5531a32c8f Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 18 Jan 2024 15:03:32 +0800 Subject: [PATCH 028/335] [zh-cn] init the translation of autofocus attribute (#17947) --- .../html/global_attributes/autofocus/index.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 files/zh-cn/web/html/global_attributes/autofocus/index.md diff --git a/files/zh-cn/web/html/global_attributes/autofocus/index.md b/files/zh-cn/web/html/global_attributes/autofocus/index.md new file mode 100644 index 00000000000000..4591e2619a729b --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/autofocus/index.md @@ -0,0 +1,32 @@ +--- +title: autofocus +slug: Web/HTML/Global_attributes/autofocus +l10n: + sourceCommit: 1c44eb06768fc5454366b7565cc734d9a26d16b4 +--- + +{{HTMLSidebar("Global_attributes")}} + +[全局属性](/zh-CN/docs/Web/HTML/Global_attributes) **`autofocus`** 是一个布尔属性，表示元素应在页面加载时或其所属的 {{HTMLElement("dialog")}} 显示时被聚焦。 + +```html + +``` + +在文档或对话框中，最多只能有一个元素具有 autofocus 属性。如果应用于多个元素，第一个元素将获得焦点。 + +> **备注：** `autofocus` 属性适用于所有元素，而不仅仅是表单控件。例如，它可用于 [contenteditable](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 区域。 + +## 无障碍考虑 + +自动聚焦表单控件会让使用屏幕阅读技术的视障人士和有认知障碍的人士感到困惑。当指定 `autofocus` 时，屏幕阅读器会将用户“传送”到表单控件上，而不会事先向他们发出警告。 + +在应用 `autofocus` 属性时，请仔细考虑无障碍性。自动聚焦于控件会导致页面在加载时滚动。在某些触摸设备上，焦点还会导致动态键盘的显示。虽然屏幕阅读器会公布收到焦点的表单控件的标签，但屏幕阅读器不会公布标签之前的任何内容，而使用小型设备的视力正常的用户同样会错过前面内容所创建的上下文。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} From 6d37079b6b916f5ccd5c1effd1599d0eb67cb254 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 18 Jan 2024 08:24:47 +0100 Subject: [PATCH 029/335] [zh-cn] sync translated content (#17945) Co-authored-by: Allo --- files/zh-cn/_redirects.txt | 6 +++-- files/zh-cn/_wikihistory.json | 2 +- files/zh-cn/mdn/contribute/index.md | 2 +- .../page_structures/index.md | 2 +- .../{quicklinks => sidebars}/index.md | 26 +++++++++---------- files/zh-cn/web/api/css_object_model/index.md | 2 +- .../css_properties_and_values_api/index.md | 4 +-- .../api/{houdini => houdini_apis}/index.md | 4 +-- 8 files changed, 25 insertions(+), 23 deletions(-) rename files/zh-cn/mdn/writing_guidelines/page_structures/{quicklinks => sidebars}/index.md (56%) rename files/zh-cn/web/api/{houdini => houdini_apis}/index.md (99%) diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 0707feede250e0..354650f61bd1b6 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1179,6 +1179,7 @@ /zh-CN/docs/MDN/Structures/Macros/Custom_macros /zh-CN/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros /zh-CN/docs/MDN/Structures/Macros/Other /zh-CN/docs/MDN/Writing_guidelines/Page_structures/Macros/Other /zh-CN/docs/MDN/Writing_guidelines/Howto/Tag /zh-CN/docs/MDN/Writing_guidelines/Howto +/zh-CN/docs/MDN/Writing_guidelines/Page_structures/Quicklinks /zh-CN/docs/MDN/Writing_guidelines/Page_structures/Sidebars /zh-CN/docs/MDN/Yari https://github.com/mdn/yari/tree/main/docs/what-yari-does.md /zh-CN/docs/MDN_at_ten /zh-CN/docs/MDN/At_ten /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus /zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/menus @@ -1620,6 +1621,7 @@ /zh-CN/docs/Web/API/HTMLVideoElement/autoPictureInPicture /zh-CN/docs/Web/API/HTMLVideoElement /zh-CN/docs/Web/API/Headers/getAll /zh-CN/docs/Web/API/Headers/get /zh-CN/docs/Web/API/History_API/Example /zh-CN/docs/Web/API/History_API/Working_with_the_History_API +/zh-CN/docs/Web/API/Houdini /zh-CN/docs/Web/API/Houdini_APIs /zh-CN/docs/Web/API/IDBCursor.direction /zh-CN/docs/Web/API/IDBCursor/direction /zh-CN/docs/Web/API/IDBDatabase/onversionchange /zh-CN/docs/Web/API/IDBDatabase/versionchange_event /zh-CN/docs/Web/API/IDBFactory.open /zh-CN/docs/Web/API/IDBFactory/open @@ -2347,7 +2349,7 @@ /zh-CN/docs/Web/Guide/HTML/Introduction /zh-CN/docs/learn/HTML/Introduction_to_HTML /zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages /zh-CN/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /zh-CN/docs/Web/Guide/HTML/Using_data_attributes /zh-CN/docs/Learn/HTML/Howto/Use_data_attributes -/zh-CN/docs/Web/Guide/Houdini /zh-CN/docs/Web/API/Houdini +/zh-CN/docs/Web/Guide/Houdini /zh-CN/docs/Web/API/Houdini_APIs /zh-CN/docs/Web/Guide/Introduction_to_Web_development /zh-CN/docs/Learn /zh-CN/docs/Web/Guide/Mobile /zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design /zh-CN/docs/Web/Guide/Parsing_and_serializing_XML /zh-CN/docs/Web/XML/Parsing_and_serializing_XML @@ -2444,7 +2446,7 @@ /zh-CN/docs/Web/HTTP/策略特征 /zh-CN/docs/Web/HTTP/Permissions_Policy /zh-CN/docs/Web/HTTP/缓存_FAQ /zh-CN/docs/Web/HTTP/Caching /zh-CN/docs/Web/HTTP/重定向 /zh-CN/docs/Web/HTTP/Redirections -/zh-CN/docs/Web/Houdini /zh-CN/docs/Web/API/Houdini +/zh-CN/docs/Web/Houdini /zh-CN/docs/Web/API/Houdini_APIs /zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript /zh-CN/docs/Web/JavaScript/Language_overview /zh-CN/docs/Web/JavaScript/About_JavaScript /zh-CN/docs/Web/JavaScript /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index def106472f06e0..dbe10482c081e5 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -10936,7 +10936,7 @@ "modified": "2020-09-07T23:10:09.451Z", "contributors": ["Nothing_bin"] }, - "Web/API/Houdini": { + "Web/API/Houdini_APIs": { "modified": "2020-11-21T05:08:58.458Z", "contributors": ["xusy", "bingoYB", "cutefcc", "sunfeel", "xgqfrms"] }, diff --git a/files/zh-cn/mdn/contribute/index.md b/files/zh-cn/mdn/contribute/index.md index 1316e7bced84fb..249231d31996c9 100644 --- a/files/zh-cn/mdn/contribute/index.md +++ b/files/zh-cn/mdn/contribute/index.md @@ -95,4 +95,4 @@ MDN Web 文档需要你的帮助！我们有大量需要完成的工作，比如 ## 其他有用的页面 -{{LandingPageListSubPages()}} +{{LandingPageListSubPages}} diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/index.md index dac276e1f970d9..9b25ff0cad14c2 100644 --- a/files/zh-cn/mdn/writing_guidelines/page_structures/index.md +++ b/files/zh-cn/mdn/writing_guidelines/page_structures/index.md @@ -7,4 +7,4 @@ slug: MDN/Writing_guidelines/Page_structures 在 MDN 上有各式各样的可重复使用的文档结构，以使 MDN 文章中的内容有一致性的表现。这里的文章描述了这些结构。因此作为一名 MDN 的作者，你可以识别、应用并修改成适合于你撰写、编辑或翻译的文档。 -{{LandingPageListSubPages()}} +{{LandingPageListSubPages}} diff --git a/files/zh-cn/mdn/writing_guidelines/page_structures/quicklinks/index.md b/files/zh-cn/mdn/writing_guidelines/page_structures/sidebars/index.md similarity index 56% rename from files/zh-cn/mdn/writing_guidelines/page_structures/quicklinks/index.md rename to files/zh-cn/mdn/writing_guidelines/page_structures/sidebars/index.md index 9d6fc435bca675..52b63e9f4f3900 100644 --- a/files/zh-cn/mdn/writing_guidelines/page_structures/quicklinks/index.md +++ b/files/zh-cn/mdn/writing_guidelines/page_structures/sidebars/index.md @@ -1,15 +1,15 @@ --- -title: 快速链接 -slug: MDN/Writing_guidelines/Page_structures/Quicklinks +title: 侧边栏 +slug: MDN/Writing_guidelines/Page_structures/Sidebars --- {{MDNSidebar}} -MDN 支持在页面中添加快速链接；这些框是包含到 MDN 上的其他页面或站外页面链接的可分层列表。本文描述了如何创建快速链接框。 +MDN 支持在页面中添加侧边栏；这些框是包含到 MDN 上的其他页面或站外页面链接的可分层列表。本文描述了如何创建侧边栏。 -## 快速链接语法 +## 侧边栏语法 -页面的快速链接是通过创建一个 ID 为“Quick_links”的 {{HTMLElement("section")}} 块来提供的。然后，将要放入快速链接框中的内容放在 section 内。这些链接需要格式化为 {{HTMLElement("ol")}} 有序列表（可以嵌套）。你可以通过使用编辑器工具栏中的编号列表按钮来实现这一点。例如，你的快速链接 HTML 可能如下所示： +页面的侧边栏是通过创建一个 ID 为“Quick_links”的 {{HTMLElement("section")}} 块来提供的。然后，将要放入侧边栏框中的内容放在 section 内。这些链接需要格式化为 {{HTMLElement("ol")}} 有序列表（可以嵌套）。你可以通过使用编辑器工具栏中的编号列表按钮来实现这一点。例如，你的侧边栏 HTML 可能如下所示： ```html