Знакомство с правилом @document: что это и как работает?
Как известно, большинство нормальных веб-сайтов (не визиток) состоят из нескольких страниц, хотя все они оформляются единой табличкой стилей.
Все это позволяет сократить количество запросов HTTP и обеспечить приличную скорость загрузки страниц.
Правда, есть в таком подходе один небольшой минус. Его суть состоит в том, что в каскадных табличках стилей могут находиться стили, которые на самом-то деле нужны лишь 1-2 страницам вашего сайта. Как думаете, было бы здорово иметь возможность применить определенные наборы стилей для конкретной страницы, однако в качестве базы задействовать единую таблицу стилей?
Такая задумка имеет все шансы стать реальностью. И все это благодаря новому стандарту CSS и правилу под названием @document. Оно изначально было предложено в виде ответвления от технологии CSS3, но затем его введение отложили до выхода системы CSS 4-го уровня.
А теперь давайте посмотрим, как же это все будет работать.
@document позволит вам применить правила стилизации не ко всем страницам, а исключительно к выбранным. Как отмечается в предложении, данный элемент был разработан прежде всего для таблиц стилей пользователей. Таким образом, чтобы красиво и грамотно оформить свой любимый веб-сайт, можно сделать вот что:
@document domain(«facebook.com») {
body {
background-color: yellow;
}
a {
color: red;
}
img {
border-radius: 100%;
}
}
@document domain(«twitter.com») {
body {
background-color: red;
}
a {
color: pink;
}
}
Вы можете посетить замечательный веб-сайт UserStyles.org и найти там достойные примеры пользовательских таблиц.
Являясь автором сайта, можно также задействовать @document, чтобы управлять стилями на сайте. Предположим, что вам нужно применить какие-то правила стилей к одной конкретной странице веб-сайта. Для этого вы можете сделать следующее:
@document url(«http://www.coolwebmasters.com/coolads.html») {
h1 {
font-size: 50em;
color: green;
}
p {
color: red;
}
a {
color: blue;
}
}
При этом разница между domain (первый пример) и url () состоит в том, что domain() влияет на все страницы сразу, если они размещены на указанном домене. Что касается url(), он может применить стили только к конкретному URL. Остальные же страницы URL не будут подвергаться никаким изменениям.
Кроме того, вы можете использовать url-prefix() для того, чтобы применить правила стилей к адресу URL. Например, они могут начинаться с CSS.
@document url-prefix(«http://www.coolwebmasters.com/cssstyle-sheets/«) {
h2 {
font-family: «Georgia»;
}
div {
background-color: blue;
color: #fff;
}
}
Используя функцию regexp(), вы можете использовать регулярные выражения (Regular Expression) (Regex)). Пример, который вы видите внизу, был взят из W3C. Regex полностью совпадает с URL, который в свою очередь выглядит как http://www.w3.org/TR/. После него идут 4 цифры, а завершается данная ссылка 8 цифрами.
@document regexp(«http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/») {
body {
transform: rotate(90deg);
}
}
В завершение нам хочется поздравить вас! Ведь теперь вы знаете, как можно применить правило @document. Но не забывайте, что в настоящий момент данная технология относится к CSS4, а Firefox – по сути единственный браузер, реализовавший ее поддержку посредством префикса @-moz-. Между тем, мы вместе с вами и дальше будем следить за тем, как развиваются события связанные с правилом @document.