सीएसएस की बेहतरीन सुविधाएं

कल ऑफ़िस में, हम सीएसएस की अजीब और जादुई तरकीबें आज़मा रहे थे. उदाहरण के लिए, इस ट्वीट में खाली लिंक साफ़ तौर पर दिख रहे हैं:

a[href = ""] {
    background: red;
    color: white;
    font-size: x-large;
}

jsFiddle पर लाइव उदाहरण देखें

आपके पास रिलेटिव लिंक से अलग स्टाइल में, एब्सोलूट लिंक बनाने का विकल्प भी है:

a[href ^= http] {
    display: inline-block;
    color: red;
    transform: rotate(180deg);
}

jsFiddle पर लाइव उदाहरण देखें

अगर आपको अपने डोमेन से बाहर ले जाने वाले लिंक के लिए कोई अलग स्टाइल चाहिए, तो :not() सिलेक्टर का इस्तेमाल करें. हम HTML5Rocks पर, बाहरी लिंक के बगल में छोटे ऐरो इस तरह से जोड़ते हैं.

a[href ^= 'http']:not([href *= 'html5rocks.']) {
    background: transparent url(arrow.png) no-repeat center right;
    padding-right: 16px;
}

jsFiddle पर लाइव उदाहरण देखें

आपको याद दिला दें कि सिर्फ़ लिंक की स्टाइल बदलने की सुविधा ही उपलब्ध नहीं है. यहां सभी PNG इमेज को उलटा करने का तरीका बताया गया है:

img[src $= .png] {
    filter: invert(100%);
}

एट्रिब्यूट सिलेक्टर से आगे बढ़ते हुए, क्या आपको पता है कि दस्तावेज़ के अन्य एलिमेंट के साथ-साथ, दस्तावेज़ का हेड भी दिखाया जा सकता है?

head {
    display: block;
    border-bottom: 5px solid red;
}
script, style, link {
    display: block;
    white-space: pre;
    font-family: monospace;
}

क्या आपको पता है कि :after और :before कॉन्टेंट को भरने के लिए, सीएसएस एट्रिब्यूट-फ़ंक्शन की बेहतरीन सुविधा का इस्तेमाल किया जा सकता है?

script:before {
    content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
}
script:after {
    content: "</script>";
}

style:before {
    content: "<style type=\"" attr(type) "\">";
}
style:after {
    content: "< /style>";
}

/* And for a finish, <link> */
link:before {
    content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

jsFiddle पर लाइव उदाहरण देखें

ध्यान दें कि attr() फ़ंक्शन, मैच करने वाले एलिमेंट के एट्रिब्यूट की वैल्यू पढ़ता है. इसलिए, अगर इसका इस्तेमाल #foo:before के लिए किया जाता है, तो यह #foo के एट्रिब्यूट पढ़ता है.