Это :модально?

Этот удобный псевдоселектор CSS дает вам возможность выбирать модальные элементы.

Этот удобный псевдоселектор дает вам возможность выбирать «модальные» элементы и избегать управления классами в JavaScript, предоставляя способ обнаружения модальных элементов.

Поддержка браузера

  • Хром: 105.
  • Край: 105.
  • Фаерфокс: 103.
  • Сафари: 15.6.

Источник

Два типа элементов в настоящее время классифицируются как :modal :

  • Элементы диалога с использованием метода showModal .
  • Элементы, находящиеся в полноэкранном режиме.

Как вы можете его использовать? В этом примере задается масштаб всех элементов <dialog> , которые являются :modal .

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);
}

Это также будет работать для элементов, находящихся в полноэкранном режиме. Рассмотрим этот элемент заголовка, состоящий из промежутков.

<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%);
 
}
}