@document

Обновлено: 09.01.2023

@document

@document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобильной и основной версии сайта различаются, то мы можем задать собственный стиль элементов для каждой версии.

Синтаксис 

@document [url(<адрес>) [, url-prefix(<адрес>)][, domain(<адрес>)][, regexp(<адрес>)] ] {
 Стилевые правила
}

Значения

url() Указывает точный адрес страницы, для которой применяются стилевые правила. Адрес пишется внутри скобок url().
url-prefix() Значение, с которого начинается адрес документа.
domain() Домен или поддомен сайта.
regexp() Регулярное выражение которому соответствует адрес.

Пример

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>@document</title>
   <style>
    .ssl {
     display: none;
    }
    @-moz-document regexp("https:.*") {
     .ssl {
      display:block;
      background: #5bd4b6;
      color: #fff;
      padding: 20px
     }
    }
   </style>
  </head>
  <body>
   <div class="ssl">
    For your safety, we use a secure protocol on the site.
   </div>
  </body>
</html>

В данном примере блок с классом ssl будет виден только на сайте, адрес которого начинается с протокола https.

Примечание

Firefox использует правило @-moz-document.

Браузеры

@document

Посмотреть совместимость на Can I use?

@document