Знакомство с CSS4 правилом Document » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

25.03.2015
Без рубрики

Большинство веб-сайтов состоят из нескольких страниц, однако все эти страницы зачастую оформляются единой таблицей стилей. Это позволяет сократить число HTTP-запросов, что позволяет обеспечить хорошую скорость загрузки страниц.Однако в подобном подходе есть минус, который заключается в том, что в использующемся файле каскадных таблиц стилей могут находиться стили, которые нужны лишь одной-двум страницам сайта. Неплохо было бы, если у нас была возможность применять определенные наборы стилей для конкретных страниц, но при этом в качестве базы использовать единую таблицу стилей?Эта задумка вполне может стать реальностью благодаря новому предложенному стандарту 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.techno-co.ru/") {
        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.techno-co.ru/") {
        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.