सबसे पहले, एक अस्वीकरण। मैं वास्तव में नीचे प्रस्तुत समाधान की वकालत नहीं करता। केवल ब्राउज़र विशिष्ट सीएसएस जो मैं लिखता हूं वह IE (विशेष रूप से IE6) के लिए है, हालांकि मैं चाहता हूं कि यह मामला नहीं था।
अब, समाधान। आपने इसे सुरुचिपूर्ण बनाने के लिए कहा, इसलिए मुझे नहीं पता कि यह कितना सुंदर है, लेकिन यह निश्चित है कि केवल गेको प्लेटफार्मों को लक्षित किया जाएगा।
चाल केवल तभी काम कर रही है जब जावास्क्रिप्ट सक्षम है और मोज़िला बाइंडिंग ( एक्सबीएल ) का उपयोग करता है , जो फ़ायरफ़ॉक्स और अन्य सभी गेको-आधारित उत्पादों में आंतरिक रूप से उपयोग किया जाता है। तुलना के लिए, यह IE में व्यवहार सीएसएस संपत्ति की तरह है, लेकिन बहुत अधिक शक्तिशाली है।
मेरे समाधान में तीन फाइलें शामिल हैं:
- ff.html: शैली के लिए फ़ाइल
- ff.xml: जेको बाइंडिंग से संबंधित फाइल
- ff.css: फ़ायरफ़ॉक्स विशिष्ट स्टाइलिंग
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
अपडेट:
उपरोक्त समाधान उतना अच्छा नहीं है। यह बेहतर होगा यदि एक नया लिंक तत्व जोड़ने के बजाय यह उस "फ़ायरफ़ॉक्स" वर्ग को बॉडी तत्व पर जोड़ देगा । और यह संभव है, बस उपरोक्त जेएस को निम्नलिखित के साथ बदलकर:
this.className += " firefox";
समाधान डीन एडवर्ड्स के मोज़-व्यवहार से प्रेरित है ।