From 1ef73613664355350a6437269b8cff2cca472412 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 00:16:51 +0900 Subject: Web/CSS/content-visibility を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/content-visibility/index.html | 111 ------------------------- files/ja/web/css/content-visibility/index.md | 111 +++++++++++++++++++++++++ 2 files changed, 111 insertions(+), 111 deletions(-) delete mode 100644 files/ja/web/css/content-visibility/index.html create mode 100644 files/ja/web/css/content-visibility/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html deleted file mode 100644 index ac51db4435..0000000000 --- a/files/ja/web/css/content-visibility/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: content-visibility -slug: Web/CSS/content-visibility -translation_of: Web/CSS/content-visibility ---- -

{{CSSRef}}

- -

content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

- -

文法

- -
/* Keyword values */
-content-visibility: visible;
-content-visibility: hidden;
-content-visibility: auto;
-
-/* Global values */
-content-visibility: initial;
-content-visibility: unset;
-
- -

値

- -
-
visible
-
-

無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。

-
-
hidden
-
-

要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、display: noneをコンテンツに与えるのと似ています。

-
-
auto
-
-

この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。

-
-
- -

例

- -

autoを使用して長いページのレンダリングコストを削減

- -

次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。

- -
<style>
-section {
-  content-visibility: auto;
-  contain-intrinsic-size: 0 500px;
-}
-
-<section>...
-<section>...
-<section>...
-<section>...
-...
-
- -

hiddenを使用して手動で可視性を管理

- -

次の例は、スクリプトで可視性を管理できることを示しています。たとえば、display：noneの代わりにcontent-visiblity：hiddenを使用することの追加の利点は、content-visibilityで非表示にしたときにレンダリングされたコンテンツがレンダリング状態を保持することです。これは、コンテンツが再度表示される場合、他のコンテンツよりも速くレンダリングされることを意味します。

- -
<style>
-.hidden {
-  content-visibility: hidden;
-  /* 非表示の場合、要素のサイズを0x500pxサイズの子が1つあるかのようにします */
-  contain-intrinsic-size: 0 500px;
-}
-.visible {
-  content-visibility: visible;
-  /* これは、.hiddenと.visibleを切り替えるときにレイアウトがシフトしないようにするためです */
-  contain: style layout paint;
-}
-
-
-
-<div class=hidden>...
-<div class=visible>...
-<div class=hidden>...
-<div class=hidden>...
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Containment 2', '#content-visibility')}}{{Spec2('CSS Containment 2')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.properties.content-visibility")}}

- -

See Also

- - diff --git a/files/ja/web/css/content-visibility/index.md b/files/ja/web/css/content-visibility/index.md new file mode 100644 index 0000000000..ac51db4435 --- /dev/null +++ b/files/ja/web/css/content-visibility/index.md @@ -0,0 +1,111 @@ +--- +title: content-visibility +slug: Web/CSS/content-visibility +translation_of: Web/CSS/content-visibility +--- +

{{CSSRef}}

+ +

content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

+ +

文法

+ +
/* Keyword values */
+content-visibility: visible;
+content-visibility: hidden;
+content-visibility: auto;
+
+/* Global values */
+content-visibility: initial;
+content-visibility: unset;
+
+ +

値

+ +
+
visible
+
+

無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。

+
+
hidden
+
+

要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、display: noneをコンテンツに与えるのと似ています。

+
+
auto
+
+

この要素は、レイアウトの封じ込め、スタイルの封じ込め、およびペイントの封じ込めをオンにします。要素がユーザーに関連していない場合は、その内容もスキップします。非表示とは異なり、スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能に対して通常どおり利用可能である必要があり、通常どおりフォーカス可能で選択可能である必要があります。

+
+
+ +

例

+ +

autoを使用して長いページのレンダリングコストを削減

+ +

次の例は、autoを使用して画面外のセクションのペイントとレンダリングをスキップする方法を示しています。ビューポート外のコンテンツはレンダリングされないため、これはページの読み込みと操作の両方に役立ちます。

+ +
<style>
+section {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 500px;
+}
+
+<section>...
+<section>...
+<section>...
+<section>...
+...
+
+ +

hiddenを使用して手動で可視性を管理

+ +

次の例は、スクリプトで可視性を管理できることを示しています。たとえば、display：noneの代わりにcontent-visiblity：hiddenを使用することの追加の利点は、content-visibilityで非表示にしたときにレンダリングされたコンテンツがレンダリング状態を保持することです。これは、コンテンツが再度表示される場合、他のコンテンツよりも速くレンダリングされることを意味します。

+ +
<style>
+.hidden {
+  content-visibility: hidden;
+  /* 非表示の場合、要素のサイズを0x500pxサイズの子が1つあるかのようにします */
+  contain-intrinsic-size: 0 500px;
+}
+.visible {
+  content-visibility: visible;
+  /* これは、.hiddenと.visibleを切り替えるときにレイアウトがシフトしないようにするためです */
+  contain: style layout paint;
+}
+
+
+
+<div class=hidden>...
+<div class=visible>...
+<div class=hidden>...
+<div class=hidden>...
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Containment 2', '#content-visibility')}}{{Spec2('CSS Containment 2')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.content-visibility")}}

+ +

See Also

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