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

Post on:2022年8月2日

はじめに

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

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

Variable Units（変数単位）

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

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

:root {
  --size: 8px;
}

:root {

--size: 8px;

}

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

elem {
  width: calc(4 * (var(--size))); /* --sizeに4をかける = 32px */
}

elem {

width: calc(4 * (var(--size))); /* --sizeに4をかける = 32px */

}

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

elem {
  width: 4--size; /* --sizeに4をかける = 32px */
}

elem {

width: 4--size; /* --sizeに4をかける = 32px */

}

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

Variable Units（変数単位）をさらに詳しく解説

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

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

:root {
  --fem: clamp(10px, 1vw + 1vh, 1rem);
}

:root {

--fem: clamp(10px, 1vw + 1vh, 1rem);

}

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

@property --fem { /* "fluid em" */
  syntax: "<length>";
  initial: clamp(10px, 1vw + 1vh, 1rem);
  inherits: true;
}

.fluid-type {
  font-size: 1.2--fem; /* 12pxより小さくなったり、1.2remより大きくなったりすることはありません */
}

@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をサポートしているブラウザは、初期値を使用します。

CSS

@property --brm { syntax: "<length>"; initial: 1brm; /* brmをサポートするブラウザはこの値を使用する */ inherits: true; }

1
2
3
4
5

@property --brm {
  syntax: "<length>";
  initial: 1brm; /* brmをサポートするブラウザはこの値を使用する */
  inherits: true;
}
brmという新しい単位がサポートされていない場合は、JavaScriptポリフィルで代わりに使用するlengthを計算して、それを初期値として設定します。
コードでカスタムユニットを使用します。

CSS

height: 100--brm; /* brm単位がサポートされいない場合はポリフィルバージョンを使用する */

1

height: 100--brm; /* brm単位がサポートされいない場合はポリフィルバージョンを使用する */

終わりに

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

The Future of CSS: Variable Units, powered by Custom Properties

🔗 https://t.co/olS7ypA4gL

🏷 #css #CustomProperties pic.twitter.com/yxhHs8OIEb

— Bram.us (@bramusblog) July 7, 2022