JavaScriptを使わずにCSSだけでウィンドウの幅と高さをピクセル値として取得する方法を紹介します。

このテクニックはCSSの新しい仕様「@property」と三角関数を活用し、動的にウィンドウサイズを計算し、CSS変数として保持します。

仕組み解説

  1. 「@property」宣言：
    カスタムプロパティ「--screen-width」と「--screen-height」を定義し、画面の幅と高さ（100vwと100vh）を初期値として設定します。これにより、レスポンシブデザインに対応し、画面サイズが変わると値が更新されます。
  2. 三角関数による計算：
    「tan()」と「atan2()」を用いて、ピクセル値として幅と高さを取得。結果は整数値で、CSSの変数として使用可能です。

…言葉での説明が難しいですね。
以下が実際のコードのサンプルです。

CSSだけでウィンドウの横幅と高さを取得する

@property --screen-width {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vw;
}
@property --screen-height {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vh;
}
:root {
	--screen-width-px: tan(atan2(var(--screen-width), 1px)); /* ウィンドウの横幅 */
	--screen-height-px: tan(atan2(var(--screen-height), 1px)); /* ウィンドウの高さ */
}

これで取得した値を「--screen-width-px」と「--screen-height-px」と名付けた変数にセットしました。

これを出力する際は、以下のようにして使います。

.example:before {
	content: '横幅：' counter(screen-width-px) 'px';
}
.example:after {
	content: '高さ：' counter(screen-height-px) 'px';
}
.example:before,
.example:after {
	counter-reset: screen-height-px var(--screen-height-px) screen-width-px var(--screen-width-px);
}

ポイントとして。counter-resetを正しく指定しないと動的に取得できないので注意が必要です。

実際に設置したサンプルは以下よりどうぞ。

サンプル：JavaScriptを使わずにウィンドウの横幅と高さを取得する方法

その他の注意点

このテクニックは新しいCSSの仕様を用いているため、対応ブラウザに注意が必要です。
CSSの三角関数は特定のケースでしか活用できませんが、応用次第で動的なレイアウトに利用可能です。

CSSで新しく三角関数が使えるようになって、最初は「何に利用するんだ！？」と懐疑的でしたが、こんなテクニカルな使い方ができるようになったのは驚きです！
ぜひ一度試してみてください。