Pull to refresh

XML + CSS = счастье

Reading time 4 min
Views 12K
Возрадуйтесь, дети мои, ибо пришёл я к вам с миром и богатыми дарами. Нет, я не принёс вам того, чего вы не видели. И даже не принёс того, чего вы не имели. От чистого сердца вручаю вам то, что всегда лежало у вас под ногами, но вы не замечали того, брезгливо перешагивая, пробегая мимо по своим, несомненно самым важным, делам.

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

Примеси! Я же знаю, вы так устали без наследования. Приходится внедрять лишние классы в элементы или даже, переходить на тёмную сторону силы — копипастить по чёрному.

Отныне! Ваша душа будет чиста как у младенца. Руки в золоте как у царевичей. Дети послушными и приветливыми.

Вам ведь уже не терпится попробовать и узнать секрет мироздания? Всё очень просто! Достаточно лишь стряхнуть пыть с технологий древних и применить их ко своим нуждам.

CSS не поддерживает всего этого богатста. HTML поддерживает ENTITIES, но HTML-парсеры — слишком топорные, чтобы их воспринять. XML тоже унаследовал их поддержку и (о чудо!) все XML-парсеры умеют с ними работать.

Вы уже умеете вставлять CSS в HTML, превращать HTML в XML без потери возможностей, инклудить один XHTML в другой на стороне клиента? Умеете, я вижу это по вашим ясным глазам, зачарованно внимающим моим словам.

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

Подключение стилей ничего нового из себя не представляет:

<!DOCTYPE t:stylesheet [ <!ATTLIST t:stylesheet id ID #REQUIRED> ]><br><?xml-stylesheet type="text/xsl" href="#t:stylesheet"?><br><t:stylesheet id="t:stylesheet" version="1.0" xmlns:t="http://www.w3.org/1999/XSL/Transform"><br>    <t:output doctype-public="-//W3C//DTD XHTML 2.0//EN"/><br>    <t:template match=" @* | node() "><br>        <t:copy><br>            <t:apply-templates select=" @* | node() " /><br>        </t:copy><br>    </t:template><br>    <t:template match=" *[ @src and contains( @srctype, 'xml' ) ] "><br>        <t:copy><br>            <t:apply-templates select=" @* " /><br>            <t:apply-templates select=' document( @src )//body/node() ' /><br>        </t:copy><br>    </t:template><br>    <t:template match=" / "><br>        <t:apply-templates select=" document( '#t:stylesheet' )//html " /><br>    </t:template><br>    <t:template name="content"><br>        <html><br>            <head><br>                <title>xml-css demo page</title><br>                <style src="styles.xml" srctype="text/xml"></style><br>            </head><br>            <body><br>                <h1>Заголовок раздела</h1><br>                <p>Дополнительный текст описывающий этот раздел</p><br>            </body><br>        </html><br>    </t:template><br></t:stylesheet>

Самое интересное же — в самом стилевом файле:

<!DOCTYPE css [<br><br><!ENTITY color.main "#eee " ><br><!ENTITY color.add "#369 " ><br><br><!ENTITY width.padding "32" ><br><!ENTITY width.border "16" ><br><!ENTITY width.decor "8" ><br><br><!ENTITY mixin.header "margin: 0; text-align: center;" ><br><br>]><css><body><br><br>html {<br>    background: &color.main;;<br>    margin: 0;<br>    padding: &width.padding;pt;<br>}<br>h1 { &mixin.header;<br>    border: &width.border;pt solid &color.add;;<br>    padding: &width.padding;pt;<br>    font-size: 32pt;<br>    color: &color.add;;<br>    line-height: 1em;<br>    text-overflow: ellipsis;<br>    overflow: hidden;<br>}<br>p { &mixin.header;<br>    font-size: 16pt;<br>    color: &color.main;;<br>    background: &color.add;;<br>    padding: 0 &width.border;pt &width.border;pt;<br>    font-style: italic;<br>    border-bottom: &width.decor;pt dashed &color.main;;<br>}<br><br></body></css>

Да пребудет с вами мир и понимание!
Tags:
Hubs:
+68
Comments 53
Comments Comments 53

Articles