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..

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204