是互動形式嗎？

這個實用的 CSS 虛擬選取器可讓您選取強制互動的元素。

Jhey Tompkins

這個便利的虛擬選取器可讓您選取「強制回應」元素，並且提供偵測強制性元素的方法，避免管理 JavaScript 中的類別。

瀏覽器支援

  • 105
  • 105
  • 103
  • 15.6

資料來源

目前有兩個類型的元素被歸類為 :modal：

  • 使用 showModal 方法的對話方塊元素。
  • 全螢幕模式中的元素。

如何使用該？這個範例會設定所有屬於 :modal 的 <dialog> 元素比例。

dialog:modal {
 scale: 2;
}

請參考這個示範，瞭解如何使用「強制回應」或「非強制回應」樣式顯示 <dialog>。

顯示「互動視窗」版本時，系統會使用頂層圖層提供的 ::backdrop。

dialog::backdrop {
 background: hsl(0 0% 10% / 0.5);
}

但如果是沒有 ::backdrop 的非強制回應版本，則會使用 ::before 虛擬元素建立假版。亮度較低，且不會模糊處理後方的內容。您可以結合 :not 來偵測非強制性的 <dialog>。

dialog[open]:not(:modal)::before {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  background: hsl(0 0% 10% / 0.25);
  transform: translate3d(-50%, -50%, -1px);
}

同樣適用於全螢幕模式中的元素。看看這個由 Span 組成的標題元素。

<header>
  <h1>
    <span style="--index: 0;">:</span>
    <span style="--index: 1;">m</span>
    <span style="--index: 2;">o</span>
    <span style="--index: 3;">d</span>
    <span style="--index: 4;">a</span>
    <span style="--index: 5;">l</span>
 </h1>
</header>

當元素處於全螢幕模式時，跨距的動畫就會呈現。

h1 span {
 animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
  --speed: 0.75;
}
@keyframes jump {
  50% {
    transform: translateY(-50%);
  }
}

新可互通系列的一部分