Перейти к содержанию

@document

Правило @document ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа. Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.

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

Синтаксис

@document url("https://www.example.com/") {
  h1 {
    color: green;
  }
}

Значения

Правило @document может указывать одну или несколько подходящих функций. Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса. Доступны следующие функции:

url()
который соответствует точному URL-адресу.
url-prefix()
который совпадает, если URL-адрес документа начинается с указанного значения.
domain()
который совпадает, если URL-адрес документа находится в предоставленном домене (или его субдомене).
media-document()
с параметром видео, изображения, плагина или всего.
regexp()
который совпадает, если URL-адрес документа сопоставляется с предоставленным регулярным выражением. Выражение должно соответствовать всему URL-адресу.

Значения, предоставляемые функциям url(), url-prefix(), domain(), и media-document() могут быть необязательно заключены в одинарные или двойные кавычки. Значения, предоставляемые функции regexp() должны быть заключены в кавычки.

Экранированные значения, предоставляемые функции regexp() акже должны быть экранированы из CSS. Например, . (период) соответствует любому символу в регулярных выражениях. Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений (\.), А затем убежать от этой строки с помощью правил CSS (\\.).

Спецификации

Примеры

Пример 1

@document url(http://www.w3.org/),
          url-prefix(http://www.w3.org/Style/),
          domain(mozilla.org),
          media-document(video),
          regexp("https:.*") {
  /* CSS rules here apply to:
     - The page "http://www.w3.org/"
     - Any page whose URL begins with "http://www.w3.org/Style/"
     - Any page whose URL's host is "mozilla.org"
       or ends with ".mozilla.org"
     - Any standalone video
     - Any page whose URL starts with "https:" */

  /* Make the above-mentioned pages really ugly */
  body {
    color: purple;
    background: yellow;
  }
}

Пример 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="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">
      Для вашей безопасности на сайте мы используем защищённый протокол.
    </div>
  </body>
</html>

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

Ссылки