CSSは確実に進化している! 新機能、単位を変数として利用できる「Variable Units(変数単位)」
Post on:2022年8月2日
今年になってもCSSの進化が止まりません、むしろ加速しています!
IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数(カスタムプロパティ)を使えるようになったのはありがたいですね。
参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
そしてCSSの新機能として、単位を変数として使用できる「Variable Units(変数単位)」が登場しようとしています。
たとえば、--base
を8px
にし、4倍にしたい時はcalc(4 * (var(--base)))
と記述していましたが、4--base
で32px
になります。
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によって仕様化されたもので、単位として使用できるカスタムプロパティを定義できるようにすることです。
たとえば、こんな感じです。
1 2 3 |
:root { --size: 8px; } |
上記のCSSでは、--size
というカスタムプロパティに8px
が設定されています。これをCSSで使用するには下記のように記述します。
1 2 3 |
elem { width: calc(4 * (var(--size))); /* --sizeに4をかける = 32px */ } |
変数単位を使用すると、この記述は短くなります。em
単位と同様に、下記のように--size
というプロパティを単位として使用できます。
1 2 3 |
elem { width: 4--size; /* --sizeに4をかける = 32px */ } |
記述ははるかに短く、読み方がわかれば、かなり簡単です🙂
Variable Units(変数単位)をさらに詳しく解説
カスタムプロパティにはどんなものでも設定できるので、前述の単純な8px
よりも複雑な例で見てましょう。
参考: CSSの変数(カスタムプロパティ)の基礎知識、便利な使い方を詳しく解説
1 2 3 |
:root { --fem: clamp(10px, 1vw + 1vh, 1rem); } |
@property
に使用するカスタムプロパティを設定してみました。これはもう:root
にプロパティを定義する必要がなくなり、値をアニメーション化できるようになります。さらに<length>
以外を割り当てると、初期値にフォールバックします。
1 2 3 4 5 6 7 8 9 |
@property --fem { /* "fluid em" */ syntax: "<length>"; initial: clamp(10px, 1vw + 1vh, 1rem); inherits: true; } .fluid-type { font-size: 1.2--fem; /* 12pxより小さくなったり、1.2remより大きくなったりすることはありません */ } |
この新しい単位のポリフィル
この機能の素晴らしいところは、ブラウザがまだサポートしていない新しい単位をポリフィルする方法を開くことです。たとえば、brm
という架空の単位があるとします。
brm
という新しい単位に--
を加えて、エイリアスにします。brm
をサポートしているブラウザは、初期値を使用します。
12345@property --brm {syntax: "<length>";initial: 1brm; /* brmをサポートするブラウザはこの値を使用する */inherits: true;}brm
という新しい単位がサポートされていない場合は、JavaScriptポリフィルで代わりに使用するlengthを計算して、それを初期値として設定します。- コードでカスタムユニットを使用します。
1height: 100--brm; /* brm単位がサポートされいない場合はポリフィルバージョンを使用する */
終わりに
Variable Units(変数単位)について何かフィードバックがある場合は、下記のリンクをチェックしてください。
- CSS Custom Properties for Cascading Variables Module Level 2
- Custom units as simple variable desugaring
The Future of CSS: Variable Units, powered by Custom Properties
🏷 #css #CustomProperties pic.twitter.com/yxhHs8OIEb
— Bram.us (@bramusblog) July 7, 2022
sponsors