【CSS Modules】:stalled疑似クラスの使い方

:stalled擬似クラスは、要素が外部リソースの読み込みや非同期処理において、一時的に停止している、または遅延している状態を表す擬似クラスです。この擬似クラスは、主に<video>や<audio>といったHTMLのメディア要素、あるいは外部からデータを動的に取得するJavaScriptで制御される要素などに適用されることが想定されます。

例えば、ウェブアプリケーション上で動画コンテンツをストリーミング再生している際に、ユーザーのネットワーク環境が不安定になったり、サーバーからのデータ転送が一時的に滞ったりすると、動画データのダウンロードが中断され、再生が「詰まる」状態が発生します。このような、データが不足しているために要素の動作が一時的に停止している状況を、`:stalled擬似クラスを用いることでCSSセレクタで正確に捉えることができます。

開発者はこの擬似クラスを利用して、メディア要素やその他の動的な要素が読み込み中で進行が滞っていることをユーザーに視覚的に伝えるためのスタイルを適用できます。具体的には、要素の上に「読み込み中」を示すスピナーアニメーションを表示したり、要素全体を半透明にして操作できない状態を示したり、あるいは特定のエラーメッセージや待機を促すテキストをオーバーレイ表示したりするなどのデザインが考えられます。これにより、ユーザーはアプリケーションの現在の状態を明確に把握でき、不必要な操作を避けたり、読み込みが完了するまで待機したりすることが促されます。`:stalled擬似クラスを活用することで、動的なコンテンツを持つウェブページやアプリケーションにおいて、ユーザーエクスペリエンスを向上させるためのきめ細やかなフィードバックを提供することが可能になります。

Copy
1video:stalled {
2  opacity: 0.5;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません