CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

[coliss]

content-visibilityプロパティの使い方。

[kakusuke07]

こんなブラウザのご機嫌をとるようなCSSを書きたくないんだよ

[ichiken7]

これの正確な効果測定はどうすりゃいいんだ？Chromeのデベロッパーツールだと、ムラが激しくてわからん。

[kudoblo]

[HTML/CSS]

[kots]

cas レンダリング　読み込み速度　向上　プロパティ

[sutetuki]

“これは使わないと！レンダリングのパフォーマンスが向上する、CSSの新しいプロパティ「content-visibility」”

[halohalolin]

jQueryのプラグインを使わずCSSだけで画面外の画像を表示タイミングになるまで遅延ロードさせることができる

[nzxx]

仮想リストを作りたいときに使うとだいぶパフォーマンス上がるやつ

[braitom]

content-visibilityプロパティとは、ブラウザのサポート状況、実際の使い方が書かれている。

[Helfard]

ふーむ…。

[mayumayu_nimolove]

素晴らしい

[aceraceae]

Firefox はまだか。

[jsmnt]

よい

[ntstn]

WordPressのとしてはどう構成しようかなコレ。見出しごとに分けておくと良い感じ？

[rrttaa]

CSSでブロックごとlazyload的な振る舞いをする何か？

[inazuma2073]

かなり効くので積極的に使う

[Tomato-360]

便利そう