Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
その他 Limited support

CSS typed object model

CSS Typed OM は CSS の値を文字列ではなく型付き JavaScript オブジェクトとして扱い、パフォーマンスと型安全性を向上させます。

その他

概要

CSS Typed OM は CSS の値を文字列ではなく型付き JavaScript オブジェクトとして扱い、パフォーマンスと型安全性を向上させます。

対応ブラウザ

デスクトップ

Chrome 66+
Edge 79+
Safari 16.4+
Firefox 未対応

モバイル

Chrome Android 66+
Safari iOS 16.4+
Firefox Android 未対応

基本構文

JAVASCRIPT 
// 値の取得（型付き）
const width = el.computedStyleMap().get('width');
console.log(width.value, width.unit); // 100, 'px'

// 値の設定
el.attributeStyleMap.set('height', CSS.px(200));

実務での使いどころ

  • CSS typed object model の活用

    CSS Typed Object Model。CSSの値を型付きオブジェクトとして操作するAPI。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク