17.04.14, 21:17
1 комментарий
  Уроки

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

Большинство веб-сайтов состоят из нескольких страниц, однако все эти страницы зачастую оформляются единой таблицей стилей. Это позволяет сократить число 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.

Комментарии

  1. NorDULaN Пользователь offline 18 апреля 2014 21:48                    

    Ждем выхода CSS4..

Напишите своё мнение