XML + CSS = happiness

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

    Constants! Yes, your aspirations reached my ears, made their way into the depths of the soul and pulled out these beautiful creations, allowing you to synchronously change the associated values ​​in different parts of the file.

    Mix in! I know you are so tired without inheritance. You have to introduce extra classes into the elements or even switch to the dark side of the force - copy-paste on black.

    From now on! Your soul will be as pure as a baby. Hands in gold like the princes. Children are obedient and affable.

    You can't wait to try and find out 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 can work with them.

    Do you already know how to embed CSS in HTML, turn HTML into XML without losing features, incorporate one XHTML into 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 can overcome the temptation to stagnate in the framework of false prosperity and go beyond the limits of commonplace!

    Connecting styles is nothing new:







                    xml-css demo page

    Заголовок раздела


    Дополнительный текст описывающий этот раздел


    The most interesting thing is in the style file itself :


    html {
        background: &color.main;;
        margin: 0;
        padding: &width.padding;pt;
    h1 { &mixin.header;
        border: &width.border;pt solid &color.add;;
        padding: &width.padding;pt;
        font-size: 32pt;
        color: &color.add;;
        line-height: 1em;
        text-overflow: ellipsis;
        overflow: hidden;
    p { &mixin.header;
        font-size: 16pt;
        color: &color.main;;
        background: &color.add;;
        padding: 0 &width.border;pt &width.border;pt;
        font-style: italic;
        border-bottom: &width.decor;pt dashed &color.main;;

    May peace and understanding be with you!

    Also popular now: