便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver

Post on:2024年10月8日

はじめに

MutationObserverの欠点は（私見ですが）、CSSのプロパティの値の変更を検出できないことです。

その欠点は埋めるために私はそれを可能にするライブラリを作成しました、@bramus/style-observerです。これによりCSSのプロパティの計算値の変更にJavaScriptによるコールバックができます。

このライブラリは、requestAnimationFrameに依存せず、個別にアニメーションするプロパティ（カスタムプロパティも含む）をサポートする点で、これまでの試みとは異なります。これを実現するために、ライブラリはCSS Transitionとtransition-behavior: allow-discrete;を利用しています。

ライブラリのデモ

さっそくデモを見てましょう。

ドキュメント（あらゆる場所）をクリックする度にbackground-colorがランダムなカラーに変更されます。@bramus/style-observerでは、各変更に応じてコールバックが実行されます。このコールバックはNotyfを使用して、通知パネルに新しい計算値を表示しています。

See the Pen
@bramus/style-observer demo by coliss (@coliss)
on CodePen.

ライブラリのインストール

@bramus/style-observerを入手するには、NPM（または使用しているパッケージマネージャ）経由でインストールしてください。

npm install @bramus/style-observer

1	npm install @bramus/style-observer

ライブラリの使い方

下記のコードは、ライブラリの使い方を示したものです。各セクションの機能についてはインラインコメントを参照してください。

// CSSStyleObserverクラスをインポートする
import CSSStyleObserver from "@bramus/style-observer";

// 監視するプロパティの名前の配列
// 通常のプロパティとカスタムプロパティの両方で、1つ以上になります
const properties = ['background-color'];

// プロパティを追跡するCSSStyleObserverを作成
// プロパティの計算値が変わるたびに、渡されたコールバックが実行されます
// ここで、コールバックは通知に新しい計算値を表示します
const cssStyleObserver = new CSSStyleObserver(
	properties,
	(values) => {
		showNotification(values['background-color']);
	}
);

// CSSStyleObserverインスタンスに<body>要素を監視させる
cssStyleObserver.attach(document.body);

// ドキュメントをクリックするたびに背景色を変更します
document.documentElement.addEventListener('click', (e) => {
	document.body.style.setProperty('background-color', randomBackgroundColor());
});

// CSSStyleObserverクラスをインポートする

import CSSStyleObserver from "@bramus/style-observer";

// 監視するプロパティの名前の配列

// 通常のプロパティとカスタムプロパティの両方で、1つ以上になります

const properties = ['background-color'];

// プロパティを追跡するCSSStyleObserverを作成

// プロパティの計算値が変わるたびに、渡されたコールバックが実行されます

// ここで、コールバックは通知に新しい計算値を表示します

const cssStyleObserver = new CSSStyleObserver(

properties,

(values) => {

showNotification(values['background-color']);

}

);

// CSSStyleObserverインスタンスに<body>要素を監視させる

cssStyleObserver.attach(document.body);

// ドキュメントをクリックするたびに背景色を変更します

document.documentElement.addEventListener('click', (e) => {

document.body.style.setProperty('background-color', randomBackgroundColor());

});

ライブラリの仕組み

@bramus/style-observerは、CSS Transitionとtransition-behavior: allow-discrete;を利用しています。

@bramus/style-observerで監視する各プロパティには、短いCSS Transitionが適用されます。このトランジションは0.001ミリ秒という非常に短いtransition-durationに設定され、transition-timing-functionはstep-startに設定されているため、トランジションはすぐに開始されます。

このトランジションをキャッチするために、ライブラリはCSSStyleObserverに渡されたコールバックを呼び出すtransitionstartイベントリスナーも設定します。

CSSでは通常、トランジションは補間可能なプロパティに対してのみ発生します。これには個別にアニメーション化するプロパティは含まれません。transition-behaviorのおかげで、個別にアニメーション化するプロパティ（カスタムプロパティを含む）でトランジション（およびそのイベント）を設定できるようになりました。これはtransition-behavior: allow-discrete;をmonitored要素に宣言することで実現できます。

ライブラリのサポートブラウザ

@bramus/style-observerは、CSS Transitionをサポートするブラウザであれば動作します。個別にアニメーションするプロパティを監視するにはtransition-behavior: allow-discrete;のサポートも必要です。
実際には、下記のブラウザをサポートしています。

Chrome/Edge 117+
Firefox 129+
Safari 18+

なお、カスタムプロパティのトランジションには、すべてのブラウザにバグがあることに注意してください。

カスタムプロパティのトランジションに関する注意事項

カスタムプロパティのトランジションに関しては、すべてのブラウザに多くのバグがあるのが現状です。

たとえば、Chromeは現在、https://crbug.com/360159391にあるように未登録のカスタムプロパティに対してトランジョンのイベントはトリガーされません。このバグは、@propertyを使用してカスタムプロパティを登録することで回避できます。

Safariは現在、特定の構文でChromeの回避策を使用すると、トランジションのループから抜け出せなくなるようです。これはカスタムプロパティが登録されていない場合やカスタムプロパティが文字列（"<string>", "*"など）の場合に発生します。他の構文、たとえば"<number>"や"<custom-ident>"など他の構文はSafariで問題を起こしません（同時にChromeのバグも回避できます）。

そして、Firefoxは現在、登録されたカスタムプロパティが補間可能な型を持つ構文を使用することを好みません。

これらの注意事項は、下記ページにまとめました。