CSS は私たちの声を聞いています。いいえ、そんなことはありません 彼。むしろ、CSS は JavaScript イベントへの応答を支援する疑似クラスをどんどん蓄積しているため、JavaScript 自体で応答する必要がありません。ただし、疑似クラスはイベントではなく状態を追跡しますが、確かにイベント リスナーのように感じることがあります (CSS のコンテキストでは実際には重要ではありません)。
だから何 は 最近はCSS？たとえば、次のような提案があります。 event-trigger アニメーション トリガー仕様では、基本的にイベントをリッスンしてアニメーションをトリガーします。ただし、私に言わせれば、この構文ではそれ以上のことが可能です (CSS を除く invoker コマンドを考えてください)。
ただし、今日の現実に留まるために、その前に、イベント リスナーのようなさまざまな CSS 疑似クラスについて説明します。 event-triggerここで、この現在サポートされていない機能がどのように機能するか (私が思う) を説明します。
「イベントリスニング」疑似クラス
:hover そして :active
:hover 状態はそれ以来の瞬間を捉えています pointerenter イベントは次の場合にアクティブになります。 pointerleave イベントの起動。これは、疑似クラスがイベントではなく状態である理由を完全に示しています。
:active 現在マウス、指、またはスタイラスで押されているターゲット (リンクやボタンなど) と一致し、同じになります。 pointerdown そして pointerup/pointercancel。
ところで、 pointer-events: none CSS 宣言により、選択した要素でインジケーター イベントが発生しなくなります。
:focus そして :focus-visible
:focus 擬似正方形と同じです focus そして blur (フォーカスを外して) JavaScript イベントですが、 :focus-visible もう少し複雑です。 :focus-visible トリガー時 :focus 表示されますが、さらにブラウザはさまざまなヒューリスティックを使用して、フォーカス インジケーターを表示するかどうかを決定します。ユーザーはキーボードで作業していますか?フォームコントロールとはどのような要素ですか?これにより、CSS が提供するものに本当に感謝します。実際、JavaScript を使用してこれを処理する最良の方法は、CSS 疑似クラスをクエリすることです。
element.addEventListener("focus", (event) => {
if (event.target.matches(":focus-visible")) {
/* Do something */
}
});:focus-within （そして :has()）
JavaScript は、「A が Y なら、Z を B に実行する」といった処理に優れています。 DOM を走査したり、イベント伝播を利用したり、その他多くのことができます。その点では、CSS には少し制限があると感じるかもしれません。ただし、CSS は急速に進化しています。スクロール駆動のアニメーションなどの新しい「これを行う」機能が多数あり、将来的にはさらに追加される予定です。 HTML などの専用コンポーネントでも同じことを行う
実際、それらのいくつかについては後ほど説明します。より全体的な意味で、私たちが持っているものは :focus-within子にフォーカスがある場合に一致します。 :has()これは、任意の有効なセレクターを受け入れ、2 つのセレクター間にそのような関係が存在する場合に一致します。
たとえば、これらのセレクターはどちらもまったく同じことを行います。
form:focus-within {
/* Style the form when something within has focus */
}
form:has(:focus) {
/* Style the form when something within has focus */
}:checked
それは完全に明らかですか？ :checked そうです。 JavaScript 現象の最も同義語は次のとおりです。 changea の値が次の場合にアクティブになります。 、 または 変化（ただし、この文脈では、 input 現象はよく似ています）。
チェックをリッスンするには、次のようなことを行います。
checkbox.addEventListener("change", (event) => {
if (event.target.checked) {
/* Checked */
} else {
/* Not checked */
}
});CSS 疑似クラスは、多くの場合、2 つの JavaScript イベントの間の瞬間をキャプチャします (たとえば、 pointerenter そして pointerleave)、しかし、それを行わないときは、上で説明したように、代わりにロジックを処理します。
隠されたロジック管理の例をさらにいくつか見てみましょう。
:valid/:invalid/:user-valid/:user-invalid/:autofill
私たちにはそれは必要ありません :not() ここでの妥当性は、疑似二乗関数と、 :valid そして :invalid 疑似クラスですが、JavaScript 側には何もありません valid イベント（のみ） invalid）。そうは言っても、JavaScript を使用している場合は、次のように呼び出すとよいでしょう。 checkValidity() メソッド (実際に起動されるメソッド) invalid 戻ってきた場合のイベント false) イベントリスナーのコールバック内 input、 change、 blur (要素からフォーカスを削除するときに有効性をチェックするため)、または submit (以下に示すように、送信時にフォーム全体の有効性を確認するため)。
form.addEventListener("submit", () => {
if (form.checkValidity()) {
/* All form controls are valid */
} else {
/* A form control is invalid (the invalid event fires) */
}
});同じことができます ValidityState 発火しない物体 invalid イベントですが、HTML フォームの検証と同様に、フォーム コントロールが有効または無効である理由がわかります。
input.addEventListener("input", () => {
if (input.validity.valid) {
/* Input is valid */
} else {
/* Input is invalid (the invalid event doesn’t fire) */
}
});HTML フォーム検証の特徴は、フロントエンド全体を処理することですが、デフォルト以外の動作が必要な場合は、 checkValidity() または ValidityState これがあなたが探しているものです。
疑似クラスはどちらの方法でも機能します。実際、ちょっと良すぎます！忘れがちなことは、フォーム コントロールは次のいずれかによってトリガーされるということです。 :valid または :invalid すぐに。しかし、 :user-valid そして :user-invalid ユーザーが値を提供するのを待ち、トリガーする前にフォーカスを外します。それは本当に何ですか change イベントの機能 (要素がチェックボックス、ラジオ ボタン、ドロップダウン リスト、カラー ピッカー、または範囲スライダーでない場合)、およびイベントの違い input イベント。
自動入力用の JavaScript イベントはなく、JavaScript を使用して自動入力を検出するクリーンな方法さえありません。 は 1つ :autofill 疑似クラス。
メディア要素の疑似クラスはまだ新しいものです。これらは Chrome ではまだサポートされておらず、最近 Firefox に導入されましたが、Interop 2026 の一部であり、すぐにスタイルを設定できるようになります。 そして 要素は、JavaScript イベントをリッスンせずに、その位置に基づいて設定されます。もう仕組みは理解できたと思いますので、簡単に説明します。
| 疑似クラス | 同等のJavaScriptイベント |
|---|---|
:buffering |
waiting |
:muted |
volumechange (ただし、以下を参照) |
:paused |
pause |
:playing |
playing （いいえ play） |
:seeking |
seeking |
:stalled |
stalled |
:volume-locked |
該当なし、以下を参照 |
使用 volumechange ミュートを検出するイベント:
audio.addEventListener("volumechange", () => {
if (audio.muted) {
// Muted
} else {
// Not muted
}
});ボリューム ロックの検出とは、ボリュームの変更を試み、成功したかどうかを確認することを意味します。最善のアプローチは、まったく新しい要素を作成して、トリガーされないようにすることです。 volumechange 実際の場合:
// Create video
const video = document.createElement("video");
// Change volume
video.volume = 0.5;
if (video.volume !== 0.5) {
// Volume locked
} else {
// Volume not locked
}(または使用するには :volume-locked CSS を記述する場合は疑似クラス。)
:popover-open / :open / :modal
ご想像のとおり、ポップオーバー用の JavaScript イベントはありません。 または
toggle イベントを確認してからステータスを確認します。
element.addEventListener("toggle", () => {
if (element.open) {
/* Popover/dialog/details open */
} else {
/* Popover/dialog/details not open */
}
});ただし、CSS は次の疑似クラスをそのまま提供します。
:popover-open(ポップオーバー用):open（のためにそして
:modal(モデルの場合と全画面要素)
フルスクリーン要素といえば…
:fullscreen
:fullscreen 擬似正方形と同義です fullscreenchange 条件が組み込まれた JavaScript イベント:
document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
/* fullscreenElement is fullscreen */
} else {
/* Nothing is fullscreen (fullscreenElement is null) */
}
});:target
URL ハッシュ (例: #contact) 要素の ID と一致します (たとえば、
:target 疑似クラス。 JavaScript を使用するときは、リッスンする必要があります hashchange イベントを実行して、一致する要素が見つかったかどうかを確認します。
window.addEventListener("hashchange", () => {
const target = document.getElementById(window.location.hash.substring(1));
if (target) {
/* Matching element found */
} else {
/* Matching element not found */
}
});結論（実際はそうではありません）
これは「JavaScript バッシャー」ではなく、むしろ JavaScript が提供する外科的制御を忘れることなく CSS を簡素化することへの評価です。物事を行う方法が増えることは決して悪いことではありません。
それに関連して、すぐに言及したいと思います event-trigger。
実際のイベントリスナー (event-trigger）
イベント トリガーについては、Chrome がスクロール トリガー アニメーションを実装したときに同じモジュール内にあることを知りましたが、まだどの Web ブラウザーでもサポートされていないため、間違っていたら申し訳ありません。飛び込んでみましょう。
event-trigger-name 単純な破線の ID は次のものを受け入れます。
button {
event-trigger-name: --event;
}event-trigger-source 基本的にはイベント リスナーが存在します。
次のキーワードを受け入れます。
activateinterestclicktouchdblclickkeypress()
button {
event-trigger-source: click;
}私は信じている interest キーワード「coming」は、Interest Invoker API を指しますが、 activate キーワード要素に依存する可能性があります。のために
とにかく、イベントがアニメーションをトリガーします。まず、を作成します @keyframes アニメーションの場合、アニメーション化する要素にアタッチしますが、アニメーションはイベントによってトリガーされるまで実行されません (通常はすぐに実行されますが)。
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation: fade-in 300ms both;
}次に、イベントが発生したときにアニメーションがトリガーされることを確認します。これを設定して行います animation-trigger 一緒に animation破線のアイデンティティ (--event）。これには、ある要素のイベントが別の要素のアニメーションをトリガーできるというオプションの利点があります。これを使用した簡単な例を次に示します event-trigger 今回の略記:
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
button {
/* On click, trigger --event animation */
event-trigger: --event click;
}
div {
/* When --event fires, play animation forwards */
animation-trigger: --event play-forwards;
/* Animation */
animation: fade-in 300ms both;
}これを状態といいます少ない イベントトリガー。考えてみてください - クリックを解除することはできませんよね?でも興味を失ってしまうかも知れませんが、どうなるのでしょうか？満杯 イベントトリガーのアニメーションは次のようになります (構文に注意してください)。 二 で区切られたイベント / そして 二 アニメーション アクション、状態ごとに 1 つ):
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
button {
/* interest (entry) / interest (exit) */
event-trigger: --event interest / interest;
}
div {
/* Play forward with interest, backward when losing it */
animation-trigger: --event play-forwards play-backwards;
/* Animation */
animation: fade-in 300ms both;
}許容されるアニメーション アクションには次のものがあります。
noneplayplay-onceplay-forwardsplay-backwardspauseresetreplay
機能しないイベントとアニメーション アクションの組み合わせは多数ありますが、それらを使用する意味がないため、これらは簡単に回避できます。ただし、さまざまなアニメーションをトリガーできます。 animation-trigger リセット専用のサブプロパティです animation。大まかな例を次に示します。
animation-name: animationA, animationB;
animation-trigger: --eventA play, --eventB replay;可能性は、W3C がこの機能をどのように進めるかによって異なります (仕様には、イベント バブリングを許可することが記載されています!) が、HTML 呼び出し側がコマンド API を使用して実行できるように、イベント トリガーを備えた JavaScript メソッドを実装できればと思います。
どう思いますか？正しい方向への一歩ですか、それとも CSS はこのまま進む必要がありますか?
Leave a Reply