Главная > CSS/Style Sheets > Знакомство с CSS4 правилом Document

Знакомство с CSS4 правилом Document


17 апреля 2014, 15:00. Разместил: Design FactoRy
Большинство веб-сайтов состоят из нескольких страниц, однако все эти страницы зачастую оформляются единой таблицей стилей. Это позволяет сократить число HTTP-запросов, что позволяет обеспечить хорошую скорость загрузки страниц.

Однако в подобном подходе есть минус, который заключается в том, что в использующемся файле каскадных таблиц стилей могут находиться стили, которые нужны лишь одной-двум страницам сайта. Неплохо было бы, если у нас была возможность применять определенные наборы стилей для конкретных страниц, но при этом в качестве базы использовать единую таблицу стилей?

Знакомство с CSS4 правилом Document

Эта задумка вполне может стать реальностью благодаря новому предложенному стандарту 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 следующим образом:

@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.
Вернуться назад