@document

Experimental

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

@document CSS at-rule ограничивает правила стиля, содержащиеся в нем, на основе 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 (\\.).

Примечание: Существует версия -moz-prefixed этого свойства @-moz-document. Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций (баг 1035091).

Формальный синтаксис

@document [ (en-US) <url> | (en-US) url-prefix(<string> (en-US)) | (en-US) domain(<string> (en-US)) | (en-US) media-document(<string> (en-US)) | (en-US) regexp(<string> (en-US)) ] (en-US)# (en-US) {
  <group-rule-body>
}

Пример

CSS

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

Specifications

Initially in CSS Conditional Rules Module Level 3, @document has been postponed to Level 4.

Browser compatibility

BCD tables only load in the browser

See also