From 11aeeb92c7591b321ed20d52c0aca10bfebcc835 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 15 Dec 2021 09:13:02 +0900 Subject: CSS Containment の記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/contain/index.html | 208 ---------------------------- files/ja/web/css/contain/index.md | 208 ++++++++++++++++++++++++++++ files/ja/web/css/css_containment/index.html | 122 ---------------- files/ja/web/css/css_containment/index.md | 122 ++++++++++++++++ 4 files changed, 330 insertions(+), 330 deletions(-) delete mode 100644 files/ja/web/css/contain/index.html create mode 100644 files/ja/web/css/contain/index.md delete mode 100644 files/ja/web/css/css_containment/index.html create mode 100644 files/ja/web/css/css_containment/index.md (limited to 'files') diff --git a/files/ja/web/css/contain/index.html b/files/ja/web/css/contain/index.html deleted file mode 100644 index e4fc76e8ef..0000000000 --- a/files/ja/web/css/contain/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: contain -slug: Web/CSS/contain -tags: - - CSS - - CSS Containment - - CSS Property - - Layout - - NeedsExample - - Paint - - Reference - - Style - - Web - - 'recipe:css-property' -translation_of: Web/CSS/contain ---- -
{{CSSRef}}
- -

contain は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

- -

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

- -
-

注: (paint, strict, content のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

- -
    -
  1. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが absolute または fixed の子孫)。
    2. -
  2. 新しい重ね合わせコンテキスト。
    3. -
  3. 新しいブロック整形コンテキスト。
    4. -
-
- -

構文

- -
/* キーワード値 */
-contain: none;
-contain: strict;
-contain: content;
-contain: size;
-contain: layout;
-contain: style;
-contain: paint;
-
-/* 複数のキーワード */
-contain: size paint;
-contain: size layout paint;
-
-/* グローバル値 */
-contain: inherit;
-contain: initial;
-contain: unset;
- -

contain プロパティは以下のうちの一つで指定します。

- - - -

値

- -
-
none
-
その要素が通常通り描画され、抑制を適用しないことを示します。
-
strict
-
style を除くすべての抑制規則がその要素に適用されることを示します。これは contain: size layout paint と同等です。
-
content
-
size および style 以外の抑制規則がその要素に適用されることを示します。これは contain: layout paint と同等です。
-
size
-
子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。
-
layout
-
要素の外側が内部のレイアウトなどに影響しないことを示します。
-
style
-
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。
-
paint
-
その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

単純なレイアウト

- -

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

- -
<h1>My blog</h1>
-<article>
-  <h2>Heading of a nice article</h2>
-  <p>Content here.</p>
-</article>
-<article>
-  <h2>Another heading of another article</h2>
-  <img src="graphic.jpg" alt="photo">
-  <p>More content here.</p>
-</article>
- -

それぞれの <article> および <img> には境界があり、画像は浮動状態です。

- -
img {
-  float: left;
-  border: 3px solid black;
-}
-
-article {
-  border: 1px solid black;
-}
- -

{{EmbedLiveSample('Simple_layout', '100%', '300')}}

- -

浮動要素の干渉

- -

1つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、2つ目の記事のレイアウトにも支障をきたしてしまいます。

- -
<h1>My blog</h1>
-<article>
-  <h2>Heading of a nice article</h2>
-  <p>Content here.</p>
-  <img src="i-just-showed-up.jpg" alt="social">
-</article>
-<article>
-  <h2>Another heading of another article</h2>
-  <img src="graphic.jpg" alt="photo">
-  <p>More content here.</p>
-</article>
- - - -

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が2つ目の記事の領域内に掛かってしまっています。

- -

{{EmbedLiveSample('Float_interference', '100%', '300')}}

- -

contain による修正

- -

それぞれの article の contain プロパティを content の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。

- - - -
img {
-  float: left;
-  border: 3px solid black;
-}
-
-article {
-  border: 1px solid black;
-  contain: content;
-}
- -

これで、最初の画像が2つ目の記事の下に浮いてくることなく、包含する要素の範囲内に留まることも意味します。

- -

{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.contain")}}

- -

関連情報

- - diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md new file mode 100644 index 0000000000..e4fc76e8ef --- /dev/null +++ b/files/ja/web/css/contain/index.md @@ -0,0 +1,208 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - CSS Containment + - CSS Property + - Layout + - NeedsExample + - Paint + - Reference + - Style + - Web + - 'recipe:css-property' +translation_of: Web/CSS/contain +--- +
{{CSSRef}}
+ +

contain は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

+ +

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

+ +
+

注: (paint, strict, content のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

+ +
    +
  1. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが absolute または fixed の子孫)。
    2. +
  2. 新しい重ね合わせコンテキスト。
    3. +
  3. 新しいブロック整形コンテキスト。
    4. +
+
+ +

構文

+ +
/* キーワード値 */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 複数のキーワード */
+contain: size paint;
+contain: size layout paint;
+
+/* グローバル値 */
+contain: inherit;
+contain: initial;
+contain: unset;
+ +

contain プロパティは以下のうちの一つで指定します。

+ + + +

値

+ +
+
none
+
その要素が通常通り描画され、抑制を適用しないことを示します。
+
strict
+
style を除くすべての抑制規則がその要素に適用されることを示します。これは contain: size layout paint と同等です。
+
content
+
size および style 以外の抑制規則がその要素に適用されることを示します。これは contain: layout paint と同等です。
+
size
+
子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。
+
layout
+
要素の外側が内部のレイアウトなどに影響しないことを示します。
+
style
+
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。
+
paint
+
その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

単純なレイアウト

+ +

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ +

それぞれの <article> および <img> には境界があり、画像は浮動状態です。

+ +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}
+ +

{{EmbedLiveSample('Simple_layout', '100%', '300')}}

+ +

浮動要素の干渉

+ +

1つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、2つ目の記事のレイアウトにも支障をきたしてしまいます。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+  <img src="i-just-showed-up.jpg" alt="social">
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ + + +

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が2つ目の記事の領域内に掛かってしまっています。

+ +

{{EmbedLiveSample('Float_interference', '100%', '300')}}

+ +

contain による修正

+ +

それぞれの article の contain プロパティを content の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。

+ + + +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}
+ +

これで、最初の画像が2つ目の記事の下に浮いてくることなく、包含する要素の範囲内に留まることも意味します。

+ +

{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.contain")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_containment/index.html b/files/ja/web/css/css_containment/index.html deleted file mode 100644 index 5394b5793c..0000000000 --- a/files/ja/web/css/css_containment/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CSS Containment -slug: Web/CSS/CSS_Containment -translation_of: Web/CSS/CSS_Containment ---- -

{{CSSRef}}
- CSS Containment という仕様の目的は、開発者に Web ページの任意のサブツリーをそれ以外から独立させることでサイトパフォーマンスを向上させることです。もしブラウザがページの一部が独立していることを知っていれば、レンダリング時に最適化し、パフォーマンスを向上させることができます。この仕様は単一の CSS プロパティ {{cssxref("contain")}} を定義しています。この文書ではその仕様の基本的な目的を説明しています。

- -

基本例

- -

多くの Web ページでは、互いに独立したいくつかのセクションで構成されています。例えば記事の見出しと内容が並んだ以下のようなマークアップで紹介します。

- -
<h1>My blog</h1>
-<article>
-  <h2>Heading of a nice article</h2>
-  <p>Content here.</p>
-</article>
-<article>
-  <h2>Another heading of another article</h2>
-  <p>More content here.</p>
-</article>
- -

各 <article> の CSS には {{cssxref("contain")}} プロパティに content という値が設定されています。

- -
article {
-  contain: content;
-}
- -

各 <article> は他の article タグとは独立しており、 この時 contain: content はブラウザにそのことを伝えるために設定されています。ブラウザは次にこの情報をコンテンツのレンダリング方法の決定に用います。例えば、表示可能な領域の外側の記事はレンダリングしない場合があります。

- -

各 <article> に contain プロパティが与えられた場合、新しい要素が追加されると、ブラウザは contain プロパティが設定された要素のサブツリーの外側については再レイアウトや再描画を行う必要がないと判断します。ただし、もし <article> が ( height: auto が設定されている時のように) そのコンテンツによってサイズが変わるようスタイリングされている場合は、ブラウザがサイズの変化に対応する必要があるかもしれません。

- -

contain プロパティについて、各 <article> の要素が独立である例を用いて説明しました。

- -

この content という値は contain: layout paint の省略記法です。ブラウザに対して、内部で行われるレイアウト時にその他の要素と完全に区別するよう伝え、要素に関する全てがその境界の内側で描画されます。どの要素も視覚的にオーバーフローしません。

- -

ある要素のスタイルがその外側に影響しないようにすべきということは、web 開発者側にとってはよく知られており、実際ページを作るときにはそうします。しかし、ブラウザはそういった意図は分かりませんし、記事のスタイルがその中で閉じるように描画されるということは最初から分かりません。このプロパティはそのことをブラウザに伝えるのに有用なのです。これを使うことで、こうした知見に基づいたパフォーマンス最適化を行うことができます。

- -

主な概念と用語

- -

この仕様は {{cssxref("contain")}} というプロパティのみを定義しています。このプロパティの値には、封じ込めの種類を指定します。

- -

レイアウトの封じ込め

- -
article {
-  contain: layout;
-}
- -

レイアウトは通常、ドキュメント全体がスコープになっています。つまり、ドキュメント全体の中からたった１つの要素を動かしただけで、様々なところが動かされたかのように扱われます。contain: layout を使うことで、ブラウザに対して必要な要素のみを伝えることができます。このプロパティを指定した要素の中の全てがその要素によって封じ込められ、その他の要素には影響せず、そしてその包含ブロックは独立したフォーマッティングコンテキストになります。

- -

加えて、以下の点に注意する必要があります。

- - - -

ペイントの封じ込め

- -
article {
-  contain: paint;
-}
- -

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

- -

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

- -

サイズの封じ込め

- -
article {
-  contain: size;
-}
- -

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

- -

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

- -

スタイルの封じ込め

- -
article {
-  contain: style;
-}
- -

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

- -

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

- -
-

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

-
- -

特殊な値

- -

There are two special values of contain:

- - - -

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

- -

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

- -
contain: strict;
-contain: strict style;
- -

参考リンク

- -

CSS プロパティ

- - - -

外部リンク

- - diff --git a/files/ja/web/css/css_containment/index.md b/files/ja/web/css/css_containment/index.md new file mode 100644 index 0000000000..5394b5793c --- /dev/null +++ b/files/ja/web/css/css_containment/index.md @@ -0,0 +1,122 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ CSS Containment という仕様の目的は、開発者に Web ページの任意のサブツリーをそれ以外から独立させることでサイトパフォーマンスを向上させることです。もしブラウザがページの一部が独立していることを知っていれば、レンダリング時に最適化し、パフォーマンスを向上させることができます。この仕様は単一の CSS プロパティ {{cssxref("contain")}} を定義しています。この文書ではその仕様の基本的な目的を説明しています。

+ +

基本例

+ +

多くの Web ページでは、互いに独立したいくつかのセクションで構成されています。例えば記事の見出しと内容が並んだ以下のようなマークアップで紹介します。

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <p>More content here.</p>
+</article>
+ +

各 <article> の CSS には {{cssxref("contain")}} プロパティに content という値が設定されています。

+ +
article {
+  contain: content;
+}
+ +

各 <article> は他の article タグとは独立しており、 この時 contain: content はブラウザにそのことを伝えるために設定されています。ブラウザは次にこの情報をコンテンツのレンダリング方法の決定に用います。例えば、表示可能な領域の外側の記事はレンダリングしない場合があります。

+ +

各 <article> に contain プロパティが与えられた場合、新しい要素が追加されると、ブラウザは contain プロパティが設定された要素のサブツリーの外側については再レイアウトや再描画を行う必要がないと判断します。ただし、もし <article> が ( height: auto が設定されている時のように) そのコンテンツによってサイズが変わるようスタイリングされている場合は、ブラウザがサイズの変化に対応する必要があるかもしれません。

+ +

contain プロパティについて、各 <article> の要素が独立である例を用いて説明しました。

+ +

この content という値は contain: layout paint の省略記法です。ブラウザに対して、内部で行われるレイアウト時にその他の要素と完全に区別するよう伝え、要素に関する全てがその境界の内側で描画されます。どの要素も視覚的にオーバーフローしません。

+ +

ある要素のスタイルがその外側に影響しないようにすべきということは、web 開発者側にとってはよく知られており、実際ページを作るときにはそうします。しかし、ブラウザはそういった意図は分かりませんし、記事のスタイルがその中で閉じるように描画されるということは最初から分かりません。このプロパティはそのことをブラウザに伝えるのに有用なのです。これを使うことで、こうした知見に基づいたパフォーマンス最適化を行うことができます。

+ +

主な概念と用語

+ +

この仕様は {{cssxref("contain")}} というプロパティのみを定義しています。このプロパティの値には、封じ込めの種類を指定します。

+ +

レイアウトの封じ込め

+ +
article {
+  contain: layout;
+}
+ +

レイアウトは通常、ドキュメント全体がスコープになっています。つまり、ドキュメント全体の中からたった１つの要素を動かしただけで、様々なところが動かされたかのように扱われます。contain: layout を使うことで、ブラウザに対して必要な要素のみを伝えることができます。このプロパティを指定した要素の中の全てがその要素によって封じ込められ、その他の要素には影響せず、そしてその包含ブロックは独立したフォーマッティングコンテキストになります。

+ +

加えて、以下の点に注意する必要があります。

+ + + +

ペイントの封じ込め

+ +
article {
+  contain: paint;
+}
+ +

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

+ +

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

+ +

サイズの封じ込め

+ +
article {
+  contain: size;
+}
+ +

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

+ +

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

+ +

スタイルの封じ込め

+ +
article {
+  contain: style;
+}
+ +

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

+ +

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

+ +
+

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

+
+ +

特殊な値

+ +

There are two special values of contain:

+ + + +

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

+ +

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

+ +
contain: strict;
+contain: strict style;
+ +

参考リンク

+ +

CSS プロパティ

+ + + +

外部リンク

+ + -- cgit v1.2.3-54-g00ecf