📜 ⬆️ ⬇️

XML + CSS = happiness

Rejoice, my children, for I have come to you with peace and rich gifts. No, I did not bring you what you did not see. And did not even bring what you did not have. From the pure heart I hand over to you what has always been under your feet, but you did not notice it, squeamishly stepping over, running past in your, undoubtedly the most important, deeds.

Constants! Yes, your aspirations reached my ears, sneaked into the depths of my soul and pulled these beautiful creatures out, allowing you to synchronously change the related values ​​in different parts of the file.

Impurities! I know you are so tired without inheritance. It is necessary to introduce extra classes into the elements or even go to the dark side of power - copy-paste on the black.
')
From now on! Your soul will be as clean as a baby. Hands in gold like princes. Children are obedient and friendly.

You can't wait to try and learn the secret of the universe? Everything is very simple! It is enough to shake off the dust from the technologies of the ancients and apply them to your needs.

CSS does not support all this richness. HTML supports ENTITIES, but HTML parsers are too clumsy to accept. XML also inherited their support and (lo and behold!) All XML parsers know how to work with them.

Do you already know how to embed CSS in HTML, turn HTML into XML without losing opportunities, include one XHTML in another on the client side? You know how, I see it in your clear eyes, fascinated by my words.

Then take advantage of the power of XML technologies and gain the right to be called web developers who are able to overcome the temptation to stagnate in the framework of fake well-being and go beyond the limits of banality!

Connecting styles is nothing new:

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

The most interesting is in the style file itself :

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

May peace and understanding be with you!

Source: https://habr.com/ru/post/92878/


All Articles