画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。
CSSカスタムプロパティ「@property」と「:root」を使ってウィンドウサイズの幅と高さを取得
まず、元ネタは以下です。
Get the screen width & height without JavaScript
CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。
@property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<length>'; inherits: true; initial-value: 100vh; } :root { --w: tan(atan2(var(--_w),1px)); --h: tan(atan2(var(--_h),1px)); }
このCSSを使ってリアルタイムで画面の幅と高さを取得して、結果を[ width ✕ height ]の形式で表示する動作サンプルは以下になります。
※ブラウザの幅を縮めるとリアルタイムで値が変化します。
See the Pen
CSS only width & height by BLACKFLAG (@BlackFlag)
on CodePen.
このようにしてJavaScriptを使用しなくても「@property」と「:root」のCSSのみで画面の幅と高さが取得が可能となります。
「@property」の対象ブラウザは以下です。
@property – CSS: カスケーディングスタイルシート | MDN
「:root」の対象ブラウザは以下です。
:root – CSS: カスケーディングスタイルシート | MDN
画面の幅や高さのウィンドウサイズを使用するのは、JavaScriptで値を取得した後に何か処理をすることに使うことが多いので、CSSのみで画面幅や高さを画面上に表示する機会はあまりないと思いますが、覚えておくと何かの時には役に立つんじゃないかと思っています。
CSSのみで画面の幅と高さを取得する際にぜひ。。。