【CSS Modules】scanメディア機能の使い方

scanプロパティは、出力デバイスのスキャン方式に関する情報を保持するプロパティです。このプロパティは、CSSのメディアクエリ（@mediaルール）内で使用され、ウェブサイトやアプリケーションが表示されている画面が、どのように画像を生成しているかを検出するために利用されます。これにより、デバイスの特性に応じた最適な表示を提供できるようになります。

スキャン方式には主に以下の二つの値があります。 一つはprogressiveで、これは画面が画像を上から下へ、一度にすべてのラインを順次表示する方式を表します。ほとんどの現代のコンピュータモニター、スマートフォン、タブレット、および最新のテレビがこの方式を採用しており、滑らかで安定した画像表示が可能です。 もう一つはinterlaceで、これは画面が画像を一度に表示せず、奇数ラインと偶数ラインを交互に表示する方式を表します。主に古いブラウン管テレビなどで使われていました。この方式はデータ転送量を抑える利点がありましたが、画面のちらつきが発生することがありました。

scanプロパティを使用することで、例えば、古いインターレース方式のテレビに向けて、ちらつきを軽減するための特別なスタイルを適用したり、現代のプログレッシブ方式のデバイス向けに高精細な画像や動画に適したレイアウトを最適化したりすることができます。これは、コンテンツをさまざまなデバイスや環境で最も効果的に表示するために非常に重要なメディア特性の一つです。一般的なCSSプロパティとは異なり、要素に直接スタイルを適用するものではなく、特定のデバイスの表示特性に応じて異なるスタイルルールを適用するために使用されます。

Copy
1@media (scan: progressive) {
2  /* スキャン方式がプログレッシブの場合に適用されるスタイル */
3  body {
4    background-color: lightgoldenrodyellow;
5  }
6}

引数なし

引数はありません

戻り値なし

戻り値はありません