क्रोम/ओपेरा विशिष्ट स्टाइलशीट कैसे करें?

Question

मुझे क्रोम/ओपेरा हैक करने की ज़रूरत है क्योंकि एक फ़ॉन्ट प्रतिस्थापन स्क्रिप्ट क्लाइंट द्वारा चीजें तोड़ती है ... यह दुखद है लेकिन सब कुछ आईई 6-7, एफएफ 2-3 और सफारी में काम कर रहा है। मेरे पास स्क्रिप्ट को ठीक करने का कोई तरीका नहीं है, मैं केवल सीएसएस और एचटीएमएल का उपयोग कर इसके आसपास हैक कर सकता हूं।

<!--[if IE 6]> 
    <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" /> 
<![endif]--> 

क्या यह संभव है:

मैं की तर्ज में कुछ करने के लिए कोशिश कर रहा हूँ?

body:nth-of-type(1) .elementOrClassName 
{ 
/* properties go here */ 
} 

इस काम कर रहा है:

मैं की तरह क्रोम विशिष्ट फिक्स करने का इस तरह से देखा था? क्या कोई आसान तरीका है? ओपेरा के बारे में क्या?

धन्यवाद!

Answer 1

एक साफ जावास्क्रिप्ट यह करने के लिए जिस तरह से: http://rafael.adm.br/css_browser_selector/

यह विज्ञापन ब्राउज़र विशिष्ट वर्गों अपने एचटीएमएल के बॉडी टैग के लिए जो आप अपने सीएसएस में उपयोग कर सकते हैं जैसे:

.opera #thingie, .chrome #thingie { 
    do: this; 
} 

आशा है कि इससे मदद मिलती है।

Answer 2

मैं इस समाधान का परीक्षण नहीं किया है, लेकिन this blog entry के अनुसार, आप Chrome के लिए निम्न को आज़मा सकते:

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) 
{ 
    var chromeCss = document.createElement("link"); 

    chromeCss.rel = "stylesheet"; 
    chromeCss.href = "ChromeStyle.css"; 

    document.getElementsByTagName("head")[0].appendChild(chromeCss); 
} 

Answer 3

सीएसएस हैक्स से बचें। वे तोड़ देंगे।

गूगल क्रोम:

@media not all and (-webkit-min-device-pixel-ratio:0) 
{ 
    #example 
    { 
     width: 200px; 
    } 
} 

सफारी:

@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #example 
    { 
     width: 200px; 
    } 
} 

ओपेरा:

@media not screen and (1) 
{ 
    #example 
    { 
     width: 200px; 
    } 
} 

Make CSS apply only for Opera 11?

How to make CSS visible only for Opera

Future proof CSS hack for LTE Opera 10

Answer 4

Google (और सफारी) के लिए आप बस निम्न का उपयोग कर सकते हैं;

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" /> 

यह एक वेबकिट विशिष्ट स्टाइल शीट लोड करेगा। 'टाइप' को जो कुछ भी आप चाहते हैं उसका नाम दिया जा सकता है लेकिन इसे शामिल करना होगा।

आप बस आगे बढ़ें और अपनी स्टाइलशीट बनाएं जैसा कि आप कृपया और सभी गैर-वेबकिट ब्राउज़र बस इसे अनदेखा करेंगे।

आपको ओपेरा के लिए उपरोक्त हैक्स का उपयोग करना होगा। निम्नलिखित मेरे लिए सबसे अच्छा काम किया:

@media not screen and (1) 
    { 
    #example 
    { 
    width: 200px; 
    } 
} 

मैं इसे का उपयोग किया है ब्राउज़र-विशिष्ट @ फॉन्ट-फेस घोषणाओं लोड करने के लिए।

Answer 5

बस याद रखें कि: "उपयोगकर्ता-एजेंट सूँघने baaaddd है"

नहीं है यही कारण है कि और एक अच्छा अभ्यास कभी नहीं होगा।

यह एक वेबसाइट बनाए रखने के लिए गधे में दर्द है जहां उपयोगकर्ता-एजेंट स्नीफिंग लागू किया गया है।

यदि आप कम मात्रा में हैं या यदि आपके पास एकाधिक स्टाइलशीट बनाने का समय नहीं है तो आपको अलग स्टाइलशीट, या सीएसएस हैक पसंद करना चाहिए।

ओपेरा के लिए आप इस चाल का उपयोग कर सकते हैं:

@media all and (-webkit-min-device-pixel-ratio:10000), 
    not all and (-webkit-min-device-pixel-ratio:0) { 
    #id { 
     css rule; 
    } 
} 

और दुःख की बात है कि हर क्रोम सीएसएस हैक्स भी सफारी के लिए applyed कर रहे हैं। इंटरनेट एक्सप्लोरर (सभी संस्करणों)
.ie10 - - इंटरनेट एक्सप्लोरर 10.x

(< = safari3 मैं अच्छी तरह से याद करते हैं)

Answer 6

.ie कोई रास्ता 2 प्रतिपादन सफारी के पुराने संस्करणों के लिए अपवादित अलग करने के लिए नहीं है
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - इंटरनेट एक्सप्लोरर 7.x
.ie6 - Internet Explorer 6.x
.ie5 - इंटरनेट एक्सप्लोरर 5.x
.gecko - फ़ायरफ़ॉक्स (सभी संस्करण), कैमिनो, सागरमोकी
.ffxx - फ़ायरफ़ॉक्स xx (विशिष्ट संस्करण की संख्या के साथ xx बदलें) नया
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - फ़ायरफ़ॉक्स 2.x
.Opera - ओपेरा (सभी संस्करण)
.opera12 - ओपेरा 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - ओपेरा 8.x
.konqueror - Konqueror
.webkit - सफारी, NetNewsWire, OmniWeb, Shiira, गूगल क्रोम
.chrome - गूगल क्रोम (सभी संस्करण)
। क्रोमिक्स - क्रोम एक्सएक्स (विशिष्ट संस्करण की संख्या के साथ एक्सएक्स बदलें) नया
। सफ़ारी - सफारी (सभी संस्करण) नया
.रॉन - एसआरवेयर आयरन

[ओएस कोड]। [ब्राउजर कोड]। Yourclass {पैडिंग-बाएं: 5 पीएक्स; फ़ॉन्ट आकार: 14 पीएक्स}

शरीर {पृष्ठभूमि-रंग: # 000}
.ie8 body {background-color: # 111} (इंटरनेट एक्सप्लोरर 8.x के लिए विशिष्ट)
.win.ie8 body {background-color: # 222} (माइक्रोसॉफ्ट विंडोज़ सभी संस्करणों के लिए इंटरनेट एक्सप्लोरर 8.x के लिए विशिष्ट)
.opera body {background-color: # 333} (ओपेरा सभी संस्करण)
.ff15 body {background-color: # 444} (फ़ायरफ़ॉक्स के लिए विशिष्ट 15.x)
.linux.gecko शरीर {पृष्ठभूमि का रंग: # 555} (फ़ायरफ़ॉक्स, कैमिनो, SeaMonkey सभी संस्करणों, X11 पर और Linux)

.ie7 #right, .ie7 #left {चौड़ाई: 320px}

अधिक जानकारी के लिए इस ली पर जाएं nk http://cssbs.altervista.org/