Правило @document CSS

Правило @document CSS at-rule ограничивает содержащиеся в нём правила стилей в зависимости от URL документа. Оно предназначено главным образом для таблиц стилей, определяемых пользователем (подробнее см. на сайте userchrome.org), но может применяться и в таблицах стилей, определяемых автором.

Синтаксис

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

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

url()

Соответствует точному URL.

url-prefix()

Соответствует, если URL документа начинается с указанного значения.

domain()

Соответствует, если URL документа находится в указанном домене (или его поддомене).

media-document()

Соответствует типу медиа согласно строке в параметре: video, image, plugin или all.

regexp()

Соответствует, если URL документа соответствует указанному регулярному выражению. Выражение должно соответствовать всему URL.

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

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

@document в настоящее время поддерживается только в Firefox; чтобы реализовать подобные возможности в собственном браузере, отличном от Firefox, можно попробовать использовать этот полифил от @An-Error94, который сочетает пользовательский скрипт, атрибуты data-* и селекторы атрибутов.

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

@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <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;
  }
}

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

Первоначально на уровне 3, @document было отложено до уровня 4, но впоследствии удалено.

Совместимость с браузерами

См. также

• Правила таблиц стилей пользователя для отдельных сайтов в списке рассылки www-style.