新しい CSS 型オブジェクト モデルを使用する

要約

CSS に、JavaScript で値を操作するための適切なオブジェクト ベースの API が追加されました。

el.attributeStyleMap.set('padding', CSS.px(42));
const padding = el.attributeStyleMap.get('padding');
console.log(padding.value, padding.unit); // 42, 'px'

文字列の連結や微妙なバグの時代は終わりました。

はじめに

古い CSSOM

CSS には、長年にわたってオブジェクト モデル（CSSOM）が存在しています。実際、JavaScript で .style を読み取り/設定するたびに、この API を使用しています。

// Element styles.
el.style.opacity = 0.3;
typeof el.style.opacity === 'string' // Ugh. A string!?

// Stylesheet rules.
document.styleSheets[0].cssRules[0].style.opacity = 0.3;

新しい CSS Typed OM

Houdini の取り組みの一環である新しい CSS Typed Object Model（Typed OM）は、CSS 値に型、メソッド、適切なオブジェクト モデルを追加することで、この世界観を拡張します。文字列ではなく、値は JavaScript オブジェクトとして公開され、CSS のパフォーマンスの高い（かつ妥当な）操作を容易にします。

element.style を使用する代わりに、要素の新しい .attributeStyleMap プロパティとスタイルシート ルールの .styleMap プロパティを介してスタイルにアクセスします。どちらも StylePropertyMap オブジェクトを返します。

// Element styles.
el.attributeStyleMap.set('opacity', 0.3);
typeof el.attributeStyleMap.get('opacity').value === 'number' // Yay, a number!

// Stylesheet rules.
const stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].styleMap.set('background', 'blue');

StylePropertyMap は Map のようなオブジェクトであるため、一般的な操作（get/set/keys/values/entries）をすべてサポートしており、柔軟に操作できます。

// All 3 of these are equivalent:
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.set('opacity', '0.3');
el.attributeStyleMap.set('opacity', CSS.number(0.3)); // see next section
// el.attributeStyleMap.get('opacity').value === 0.3

// StylePropertyMaps are iterable.
for (const [prop, val] of el.attributeStyleMap) {
  console.log(prop, val.value);
}
// → opacity, 0.3

el.attributeStyleMap.has('opacity') // true

el.attributeStyleMap.delete('opacity') // remove opacity.

el.attributeStyleMap.clear(); // remove all styles.

2 番目の例では、opacity は文字列（'0.3'）に設定されていますが、後でプロパティが読み取られると数値が返されます。

利点

では、CSS Typed OM はどのような問題を解決しようとしているのでしょうか？上記の例（およびこの記事の残りの部分）を見ると、CSS Typed OM は古いオブジェクト モデルよりもはるかに冗長であると主張するかもしれません。私もそう思います。

Typed OM を除外する前に、Typed OM がもたらす主な機能について検討してください。

  • バグの減少。たとえば、数値は常に文字列ではなく数値として返されます。

    el.style.opacity += 0.1;
el.style.opacity === '0.30.1' // dragons!

  • 算術演算と単位変換。絶対長の単位（px -> cm など）を変換し、基本的な算術演算を行います。

  • 値のクランプと丸め。型付き OM は、プロパティの許容範囲内に収まるように値を丸めたり、クランプしたりします。

  • パフォーマンスの向上。ブラウザは文字列値のシリアル化と逆シリアル化の処理を減らすことができます。現在、エンジンは JS と C++ で同様の CSS 値を認識しています。Tab Akins は、古い CSSOM と文字列を使用した場合と比較して、Typed OM のオペレーション/秒が 約 30% 高速化したことを示す初期のパフォーマンス ベンチマークを公開しています。これは、requestionAnimationFrame() を使用した高速な CSS アニメーションで重要になる可能性があります。crbug.com/808933 では、Blink でのパフォーマンスに関する追加の作業を追跡しています。

  • エラー処理。新しい解析メソッドにより、CSS の世界にエラー処理が導入されます。

  • 「CSS の名前や文字列はキャメルケースで記述すべきですか？」名前がキャメルケースか文字列か（el.style.backgroundColor と el.style['background-color'] など）を推測する必要がなくなります。Typed OM の CSS プロパティ名は常に文字列で、CSS で実際に記述する内容と一致します。

ブラウザのサポートと機能の検出

Typed OM は Chrome 66 で導入され、Firefox で実装されています。Edge はサポートの兆候を示していますが、まだプラットフォーム ダッシュボードに追加していません。

特徴検出では、CSS.* 数値ファクトリのいずれかが定義されているかどうかを確認できます。

if (window.CSS && CSS.number) {
  // Supports CSS Typed OM.
}

API の基本

スタイルへのアクセス

CSS Typed OM では、値は単位とは別に扱われます。スタイルを取得すると、value と unit を含む CSSUnitValue が返されます。

el.attributeStyleMap.set('margin-top', CSS.px(10));
// el.attributeStyleMap.set('margin-top', '10px'); // string arg also works.
el.attributeStyleMap.get('margin-top').value  // 10
el.attributeStyleMap.get('margin-top').unit // 'px'

// Use CSSKeyWorldValue for plain text values:
el.attributeStyleMap.set('display', new CSSKeywordValue('initial'));
el.attributeStyleMap.get('display').value // 'initial'
el.attributeStyleMap.get('display').unit // undefined

計算済みスタイル

計算されたスタイルが、window の API から HTMLElement の新しいメソッド computedStyleMap() に移動しました。

古い CSSOM

el.style.opacity = 0.5;
window.getComputedStyle(el).opacity === "0.5" // Ugh, more strings!

新しい型付き OM

el.attributeStyleMap.set('opacity', 0.5);
el.computedStyleMap().get('opacity').value // 0.5

値のクランプ / 丸め

新しいオブジェクト モデルの優れた機能の 1 つは、計算されたスタイル値の自動クランプと丸めです。たとえば、opacity を許容範囲 [0, 1] 外の値に設定しようとするとします。型付き OM は、スタイルを計算するときに値を 1 にクランプします。

el.attributeStyleMap.set('opacity', 3);
el.attributeStyleMap.get('opacity').value === 3  // val not clamped.
el.computedStyleMap().get('opacity').value === 1 // computed style clamps value.

同様に、z-index:15.4 を設定すると 15 に丸められるため、値は整数になります。

el.attributeStyleMap.set('z-index', CSS.number(15.4));
el.attributeStyleMap.get('z-index').value  === 15.4 // val not rounded.
el.computedStyleMap().get('z-index').value === 15   // computed style is rounded.

CSS の数値

Typed OM では、数値は次の 2 種類の CSSNumericValue オブジェクトで表されます。

  1. CSSUnitValue - 単一の単位型（"42px" など）を含む値。
  2. CSSMathValue - 複数の値や単位を含む値（数式など（例: "calc(56em + 10%)"））。

単位値

単純な数値（"50%"）は CSSUnitValue オブジェクトで表されます。これらのオブジェクトを直接作成することもできますが（new CSSUnitValue(10, 'px')）、ほとんどの場合は CSS.* ファクトリ メソッドを使用します。

const {value, unit} = CSS.number('10');
// value === 10, unit === 'number'

const {value, unit} = CSS.px(42);
// value === 42, unit === 'px'

const {value, unit} = CSS.vw('100');
// value === 100, unit === 'vw'

const {value, unit} = CSS.percent('10');
// value === 10, unit === 'percent'

const {value, unit} = CSS.deg(45);
// value === 45, unit === 'deg'

const {value, unit} = CSS.ms(300);
// value === 300, unit === 'ms'

CSS.* メソッドの完全なリストについては、仕様をご覧ください。

数学の値

CSSMathValue オブジェクトは数式を表し、通常は複数の値/単位を含みます。一般的な例は CSS の calc() 式を作成することですが、すべての CSS 関数（calc()、min()、max()）にメソッドがあります。

new CSSMathSum(CSS.vw(100), CSS.px(-10)).toString(); // "calc(100vw + -10px)"

new CSSMathNegate(CSS.px(42)).toString() // "calc(-42px)"

new CSSMathInvert(CSS.s(10)).toString() // "calc(1 / 10s)"

new CSSMathProduct(CSS.deg(90), CSS.number(Math.PI/180)).toString();
// "calc(90deg * 0.0174533)"

new CSSMathMin(CSS.percent(80), CSS.px(12)).toString(); // "min(80%, 12px)"

new CSSMathMax(CSS.percent(80), CSS.px(12)).toString(); // "max(80%, 12px)"

ネストされた式

数学関数を使用してより複雑な値を作成すると、少し混乱する可能性があります。以下に、参考になる例をいくつかご紹介します。読みやすくするために、インデントを追加しました。

calc(1px - 2 * 3em) は次のように構成されます。

new CSSMathSum(
  CSS.px(1),
  new CSSMathNegate(
    new CSSMathProduct(2, CSS.em(3))
  )
);

calc(1px + 2px + 3px) は次のように構成されます。

new CSSMathSum(CSS.px(1), CSS.px(2), CSS.px(3));

calc(calc(1px + 2px) + 3px) は次のように構成されます。

new CSSMathSum(
  new CSSMathSum(CSS.px(1), CSS.px(2)),
  CSS.px(3)
);

算術演算

CSS Typed OM の最も便利な機能の 1 つは、CSSUnitValue オブジェクトに対して数学演算を実行できることです。

基本的なオペレーション

基本的なオペレーション（add/sub/mul/div/min/max）がサポートされています。

CSS.deg(45).mul(2) // {value: 90, unit: "deg"}

CSS.percent(50).max(CSS.vw(50)).toString() // "max(50%, 50vw)"

// Can Pass CSSUnitValue:
CSS.px(1).add(CSS.px(2)) // {value: 3, unit: "px"}

// multiple values:
CSS.s(1).sub(CSS.ms(200), CSS.ms(300)).toString() // "calc(1s + -200ms + -300ms)"

// or pass a `CSSMathSum`:
const sum = new CSSMathSum(CSS.percent(100), CSS.px(20)));
CSS.vw(100).add(sum).toString() // "calc(100vw + (100% + 20px))"

コンバージョン

絶対長単位は、他の単位長に変換できます。

// Convert px to other absolute/physical lengths.
el.attributeStyleMap.set('width', '500px');
const width = el.attributeStyleMap.get('width');
width.to('mm'); // CSSUnitValue {value: 132.29166666666669, unit: "mm"}
width.to('cm'); // CSSUnitValue {value: 13.229166666666668, unit: "cm"}
width.to('in'); // CSSUnitValue {value: 5.208333333333333, unit: "in"}

CSS.deg(200).to('rad').value // 3.49066...
CSS.s(2).to('ms').value // 2000

平等

const width = CSS.px(200);
CSS.px(200).equals(width) // true

const rads = CSS.deg(180).to('rad');
CSS.deg(180).equals(rads.to('deg')) // true

CSS 変換値

CSS 変換は CSSTransformValue で作成され、変換値の配列（CSSRotate、CSScale、CSSSkew、CSSSkewX、CSSSkewY など）が渡されます。たとえば、次の CSS を再作成するとします。

transform: rotateZ(45deg) scale(0.5) translate3d(10px,10px,10px);

Typed OM に変換:

const transform =  new CSSTransformValue([
  new CSSRotate(CSS.deg(45)),
  new CSSScale(CSS.number(0.5), CSS.number(0.5)),
  new CSSTranslate(CSS.px(10), CSS.px(10), CSS.px(10))
]);

冗長性（笑）に加えて、CSSTransformValue には便利な機能がいくつかあります。2D 変換と 3D 変換を区別するブール値プロパティと、変換の DOMMatrix 表現を返す .toMatrix() メソッドがあります。

new CSSTranslate(CSS.px(10), CSS.px(10)).is2D // true
new CSSTranslate(CSS.px(10), CSS.px(10), CSS.px(10)).is2D // false
new CSSTranslate(CSS.px(10), CSS.px(10)).toMatrix() // DOMMatrix

例: 立方体をアニメーション化する

変換の使用例を見てみましょう。JavaScript と CSS 変換を使用して、立方体をアニメーション化します。

const rotate = new CSSRotate(0, 0, 1, CSS.deg(0));
const transform = new CSSTransformValue([rotate]);

const box = document.querySelector('#box');
box.attributeStyleMap.set('transform', transform);

(function draw() {
  requestAnimationFrame(draw);
  transform[0].angle.value += 5; // Update the transform's angle.
  // rotate.angle.value += 5; // Or, update the CSSRotate object directly.
  box.attributeStyleMap.set('transform', transform); // commit it.
})();

次の点に注目してください。

  1. 数値なので、数学を使って角度を直接増やすことができます。
  2. DOM を操作したり、すべてのフレームで値を読み取ったりするのではなく（box.style.transform=`rotate(0,0,1,${newAngle}deg)` を使用しないなど）、基盤となる CSSTransformValue データ オブジェクトを更新することでアニメーションを駆動し、パフォーマンスを向上させます。

デモ

ブラウザが Typed OM をサポートしている場合は、以下の赤い立方体が表示されます。キューブにマウスを合わせると、キューブが回転し始めます。このアニメーションは CSS Typed OM を利用しています。🤘

CSS カスタム プロパティの値

CSS var() は、Typed OM の CSSVariableReferenceValue オブジェクトになります。これらの値は、任意の型（px、%、em、rgba() など）を取ることができるため、CSSUnparsedValue に解析されます。

const foo = new CSSVariableReferenceValue('--foo');
// foo.variable === '--foo'

// Fallback values:
const padding = new CSSVariableReferenceValue(
    '--default-padding', new CSSUnparsedValue(['8px']));
// padding.variable === '--default-padding'
// padding.fallback instanceof CSSUnparsedValue === true
// padding.fallback[0] === '8px'

カスタム プロパティの値を取得するには、少し作業が必要です。

<style>
  body {
    --foo: 10px;
  }
</style>
<script>
  const styles = document.querySelector('style');
  const foo = styles.sheet.cssRules[0].styleMap.get('--foo').trim();
  console.log(CSSNumericValue.parse(foo).value); // 10
</script>

位置の値

object-position などのスペース区切りの x/y 位置を受け取る CSS プロパティは、CSSPositionValue オブジェクトで表されます。

const position = new CSSPositionValue(CSS.px(5), CSS.px(10));
el.attributeStyleMap.set('object-position', position);

console.log(position.x.value, position.y.value);
// → 5, 10

値の解析

Typed OM は、ウェブ プラットフォームに解析メソッドを導入します。つまり、CSS 値をプログラムで解析してから、使用を試すことができるようになりました。この新機能は、早期のバグや不正な形式の CSS を検出するのに役立ちます。

完全なスタイルを解析します。

const css = CSSStyleValue.parse(
    'transform', 'translate3d(10px,10px,0) scale(0.5)');
// → css instanceof CSSTransformValue === true
// → css.toString() === 'translate3d(10px, 10px, 0) scale(0.5)'

値を CSSUnitValue に解析します。

CSSNumericValue.parse('42.0px') // {value: 42, unit: 'px'}

// But it's easier to use the factory functions:
CSS.px(42.0) // '42px'

エラー処理

例 - CSS パーサーがこの transform 値を許容するかどうかを確認します。

try {
  const css = CSSStyleValue.parse('transform', 'translate4d(bogus value)');
  // use css
} catch (err) {
  console.err(err);
}

まとめ

CSS のオブジェクト モデルが更新されたのは嬉しいことです。文字列の操作は、私にはしっくりきませんでした。CSS Typed OM API は少し冗長ですが、バグの減少とパフォーマンスの高いコードの実現につながることを期待しています。