@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