सीएसएस हैक्स, फ़ायरफ़ॉक्स 3.5 और Google क्रोम

Question

मैंने चारों ओर खोज की और कथित तौर पर, body:nth-of-type(1) का उपयोग सीएसएस में केवल सफारी और Google क्रोम को लक्षित करने के लिए किया जाता है।

लो और देखें, मोज़िला इसे ठीक से भी पढ़ता है। मैंने दस गुना अधिक खोजा लेकिन कुछ भी नहीं आया, इसलिए मैं यहाँ हूं।

क्या कोई Google क्रोम-केवल सीएसएस हैक है?

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) { ... styles go here ... }

केवल क्रोम (AFAIK) लेकिन क्रोम और सफारी के लिए कोई सीएसएस नहीं है। आप जावास्क्रिप्ट समाधान पर विचार कर सकते हैं।

अद्यतन 22 जनवरी, 2013: टिप्पणियों में उल्लिखित अनुसार, यह अब सुरक्षित नहीं हो सकता है। मुझे एक उपयुक्त विकल्प नहीं मिला।

Answer 2

किसी भी वेबकिट चयनकर्ताओं को केवल क्रोम और सफारी के लिए काम करना चाहिए।

http://qooxdoo.org/documentation/general/webkit_css_styles

आशा यह आपके लिए क्या देख रहे है। यहाँ वेबकिट वेबसाइट है:

http://webkit.org/

Answer 3

यह हैक्स के इन प्रकार से बचने के लिए सबसे अच्छा है के रूप में वे उभरते मानकों की उपलब्धता पर निर्भर करते हैं। जाहिर है, समय बढ़ने के साथ ही उभरते मानकों को अधिक प्लेटफार्मों पर तेजी से उपलब्ध रहेगा। दूसरे शब्दों में, यह मानना ​​एक गलती है कि दिया गया ब्राउज़र [कुछ विशिष्ट ब्राउज़र] है क्योंकि इसमें [कुछ विशिष्ट सीएसएस सुविधा] है।

एरिक वेंडेलिन का उत्तर वेबकिट ब्राउज़र को लक्षित करने के लिए एक अच्छा है।

@-moz-document url-prefix() { 
    /* Gecko-specific CSS here */ 
} 

को लक्षित WebKit में जोड़ें (धन्यवाद एरिक Wendelin):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Webkit-specific CSS here */ 
} 

आप शायद भी मज़बूती से सीएसएस हैक्स के "सुविधा का पता लगाने" शैली का उपयोग कर सकते वहाँ भी छिपकली ब्राउज़र को लक्ष्य करने के लिए एक अच्छा तरीका है के भीतर संस्करणों को अलग करने के लिए इस तरह की संरचनाएं होती हैं, क्योंकि आपने इंजन को पहले से ही सही ढंग से अलग कर दिया है, और आप अधिक सुरक्षित रूप से मान सकते हैं कि किसी दिए गए इंजन के संस्करणों के बीच सुविधा असमानता समय के साथ नहीं बदलेगी।

स्पष्ट रूप से आईई और उसके विभिन्न संस्करणों को अलग करने का सबसे अच्छा तरीका सशर्त टिप्पणियों का उपयोग करना है, जिसे IE ने कई संस्करणों के लिए समर्थित किया है।

Answer 4

@supports सुविधा का पता लगाने क्रोम 28 और अब नए के लिए काम करता है।

/* Chrome 28+ */ 

@supports (-webkit-appearance:none) { .selector { color:red; } } 

मैं browserhacks को यह पोस्ट - तो या तो इसे browserhacks.com या मेरे लाइव निजी सीएसएस हैक्स परीक्षण स्थल http://browserstrangeness.bitbucket.org/css_hacks.html#chrome पर पर परीक्षण करें।

वहां कई अन्य लोग हैं जिन्हें मैंने विशिष्ट नए संस्करणों के लिए भी काम किया है। मुझे आशा है आप ने उनका आनंद लिया होगा।