コンテンツの視界の詳細

CSSのcontent-visibility属性：パフォーマンスの改善とアクセシビリティの課題

2020年8月、CSSのcontent-visibility属性がChromeブラウザで使用され始め、Una KravetsとVladimir Levinはそれに関する記事を書きました。パフォーマンスの利点を完全に活用するには、ページ内のコンテンツの大きなチャンクの高さの推定値を推定する必要があるcontain-intrinsic-sizeプロパティと併用する必要があります。これの最も奇妙な部分は、これらの大きな塊の高さについておおよその推測をする必要があるということです。

前に質問しました：高さを推測するだけですか？推測が間違っている場合はどうなりますか？パフォーマンスに影響しますか？大きな画面と小さな画面に大きな違いがある場合、この値は別のビューポートで変更されるべきですか？

ジェイク・アーチボルドとダス・サーマは最近、これらの問題を明確にするビデオを作成しました。ビデオの約7分30秒で、これがいかに混乱しているかがわかります。 Jakeは大きなHTML仕様ページをデモンストレーションとして使用し、HTMLコンテンツの大きなチャンクのラッパーを追加し、次のコードを適用しました。

セクション {
  コンテンツ視界：自動; /*描画の遅延*/
  内型サイズを含む：1px 5000px; /*コンテンツのサイズを推測します、幅は重要ではありません*/
}

明らかに、 5000px要素の高さではなく、その要素のコンテンツのサイズです。これは、親要素が独自の高さ属性でそれをオーバーライドしない限り、親要素の高さをこの値に上げるため、重要です。これの魔法は、ブラウザが最初のセクションのみを描画し（ビューポートの高さは5000px未満になる可能性が高い）、残りの描画を遅らせることです。それは怠zyなロードに似ていますが、メディアだけでなく、すべてで動作します。次のセクションの高さは5000pxですが、上部が表示されると、実際に描画され、正しい高さが決定されます。したがって、ページが一緒に積み重ねられているコンテンツの大きなブロックである場合、非常に多数を使用すると正常に動作するはずです。あなたのウェブサイトがこれよりも複雑な場合は、幸せになりましょう。

これはあなたがチェックするべき素晴らしいビデオです：ビデオリンク

これは、パフォーマンスを改善できるように、ブラウザにWebサイト情報を提供する必要があるものの別の例です。ブラウザ自体はこの情報を見つけることができますが、パフォーマンスコストで操作を実行した後にのみ実行できます。したがって、事前に伝えなければならないため、いくつかの種類の追加作業を避けます。レスポンシブ画像の場合、 srcset属性を使用して画像を提供し、CSSの動作情報を含むsizes属性を含むブラウザに事前にブラウザに伝えると、事前に計算でき、最高の画像のみがダウンロードされます。同様に、CSSのwill-changeプロパティについては、事前に最適化できるように移動を行うことを事前にブラウザに伝えることができます。これは理解できますが、少し退屈です。ブラウザが他のことをする前に、それに提供されるstuff-you-need-to-know.manifestものが必要なようなものですが、それは追加のリクエストになります！

アクセシビリティの問題も重要です。 Steve Faulknerはcontent-visibility: auto ：

コンテンツは視覚的に隠されていますが、ジョーとNVDAでは、隠された画像が発表されますが、要素の内容は発表されていません。これは、画像要素と段落要素のコンテンツがブラウザアクセシビリティツリーで表現される方法に関連しています。画像は、アクセシビリティテキストのアクセシビリティツリーにアクセシビリティ名として表示されます。段落要素の内容は、アクセシビリティツリーにはありません。

彼は、仕様により、このように隠されたコンテンツをスクリーンリーダーに提供すべきではないと指摘しました。 display: noneのようなすべてを隠すなど、両方のケースを理解できます。または、すべてをアクセシビリティツリーに保管してください。今では中間状態にあり、ALTテキスト以外のコンテキストなしに、アクセシビリティツリーに孤立した画像の束が表示される場合があります。これは、導入されている新しいテクノロジーがあなたが見たいよりも粗いかもしれないという興味深い例です。

Altのテキストといえば、私たちは皆、それらを見ることができない人々に説明する必要がある重要なことを表しているとき、それらは空ではないことを知っています。デイブは、彼らが段落のようであるべきだと言います：

私はついに最も簡単な接続を作成しました：Altテキストは段落のようなものです。テキスト写真。これは基本的なものであることは知っていますが、良いALTテキストとコードのソース順序を書く方法を理解するのに役立ちます。

ここでは否定的すぎたくない！ content-visibility属性を持つ長いスクロールページをセットアップするためのパフォーマンスの向上は巨大であり、これは素晴らしいことです。 2行のコードを使用して、描画できないものをブラウザに伝えることができるのは良いことです。

1. 私は「描画」と言い続けていますが、これが本当に正しい用語なのか、それともより具体的な意味を意味するのかはわかりません。仕様は、「ユーザーエージェントが必要になる前に多くのレイアウトを省略し、作業をレンダリングすることができるようにする」（私の強調）などのことを述べています。

以上がコンテンツの視界の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。