CSSは確実に進化している! 新機能、単位を変数として利用できる「Variable Units(変数単位)」

今年になってもCSSの進化が止まりません、むしろ加速しています!

IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数(カスタムプロパティ)を使えるようになったのはありがたいですね。
参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

そしてCSSの新機能として、単位を変数として使用できる「Variable Units(変数単位)」が登場しようとしています。

たとえば、--base8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--base32pxになります。

CSSの新機能「Variable Units(変数単位)」

The Future of CSS: Variable Units
by Bramus

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

先日、CSS Working Groupはcss-variables-2の仕様を開始することを承認しました。追加項目は「Custom Units」のサポートです。カスタムユニットとはどんなものなのか見てみましょう。

この記事で解説するCSSの機能はまだ開発中で、最終決定ではありません。この機能がブラウザにも搭載されるまでには、長い時間がかかるかもしれません。

Variable Units(変数単位)

Variable Units(変数単位)の背後にある考え方は、Jonathan Nealのツイートによって最初に提案され、現在はTab Atkinsによって仕様化されたもので、単位として使用できるカスタムプロパティを定義できるようにすることです。

たとえば、こんな感じです。

上記のCSSでは、--sizeというカスタムプロパティに8pxが設定されています。これをCSSで使用するには下記のように記述します。

変数単位を使用すると、この記述は短くなります。em単位と同様に、下記のように--sizeというプロパティを単位として使用できます。

記述ははるかに短く、読み方がわかれば、かなり簡単です🙂

Variable Units(変数単位)をさらに詳しく解説

カスタムプロパティにはどんなものでも設定できるので、前述の単純な8pxよりも複雑な例で見てましょう。

参考: CSSの変数(カスタムプロパティ)の基礎知識、便利な使い方を詳しく解説

@propertyに使用するカスタムプロパティを設定してみました。これはもう:rootにプロパティを定義する必要がなくなり、値をアニメーション化できるようになります。さらに<length>以外を割り当てると、初期値にフォールバックします。

この新しい単位のポリフィル

この機能の素晴らしいところは、ブラウザがまだサポートしていない新しい単位をポリフィルする方法を開くことです。たとえば、brmという架空の単位があるとします。

  1. brmという新しい単位に--を加えて、エイリアスにします。brmをサポートしているブラウザは、初期値を使用します。
  2. brmという新しい単位がサポートされていない場合は、JavaScriptポリフィルで代わりに使用するlengthを計算して、それを初期値として設定します。
  3. コードでカスタムユニットを使用します。

終わりに

Variable Units(変数単位)について何かフィードバックがある場合は、下記のリンクをチェックしてください。

sponsors

top of page

©2022 coliss