सीएसएस हैक
सीएसएस हैक एक कंप्यूटर प्रोग्रामिंग तकनीक है जिसका उपयोग वेब ब्राउज़र संस्करण संख्या या क्षमताओं के आधार पर सीएसएस मार्कअप को छिपाने या दिखाने के लिए किया जाता है। ब्राउज़रों के पास सीएसएस व्यवहार के अलग-अलग व्याख्यान और W3C मानकों के समर्थन के लिए अलग-अलग स्तर होते हैं। सीएसएस हैक कई बार उपयोग किए जाते हैं जिससे अनुकूलित प्रदर्शन न करने वाले कई ब्राउज़रों में सहजता से अभिविन्यास दिखाई दे। इन हैक्स का अधिकांश काम आधुनिक ब्राउज़रों के संस्करणों में काम नहीं करता है, जैसे की विशेषता समर्थन परिक्षण जैसी अन्य तकनीकें अधिक प्रचलित हो गई हैं।
हैक के प्रकार
अमान्य या गैर-अनुपालन सीएसएस
विभिन्न ब्राउज़र्स द्वारा सीएसएस के व्याख्यान में विचित्रताओं के कारण, अधिकांश सीएसएस हैक्स ऐसी अमान्य सीएसएस नियमों को लिखने के आधार पर काम करते हैं जो केवल विशेष ब्राउज़र्स द्वारा व्याख्यान किए जाते हैं, या विशेष ब्राउज़र्स में बग्स पर आश्रित होते हैं। इसका एक उदाहरण है नियमों को अंडरस्कोर के साथ प्रथम करना (जैसे _विस्तार) जिससे इंटरनेट अंवेषक 6 को लक्षित किया जा सके - अन्य ब्राउज़र्स इस लाइन को ध्यान नहीं देंगे, जिससे एक ब्राउज़र के लिए विशेष कोड लिखने के लिए उपयोग किया जा सके।।
प्रायः ऐसे ही सीएसएस हैक उपयोग करते हैं जो एस्टेरिस्क, अनुपस्थित व्हाइटस्पेस, और सीएसएस टिप्पणियों की तरह वाक्य - विन्यास त्रुटि उत्पन्न करते हैं। इसके अतिरिक्त, इंटरनेट अंवेषक 6 और 7 में, ! महत्वपूर्ण घोषणा को वाक्यांश के उत्क्रमांक के बाद किसी भी शृंखला के रूप में मान्यता प्राप्त होती है, जैसे !ie.[1]
असमर्थित सीएसएस
यद्यपि, नवीनतम सीएसएस नियमानुसार बने नियम पुराने ब्राउज़र्स द्वारा "अमान्य" के रूप में अनदेखा किए जाते हैं। पुराने नियमों के उपरांत नवीनतम नियमों को लिखकर उन पुराने नियमों को रद्द करने या संशोधित करने के माध्यम से, पुराने ब्राउज़र्स पर केवल निश्चित नियमों को सक्रिय करना संभव है।
सशर्त टिप्पणियां
इंटरनेट अंवेषक के 10 संस्करण से पहले, एक विशेष टिप्पणी धारा को इंटरनेट अंवेषक द्वारा समर्थित किया जाता था जो केवल निश्चित संस्करणों के ब्राउज़र द्वारा ही पठित की जा सकती थी। इन टिप्पणियों का अधिकांश उपयोग पुराने ब्राउज़र के लिए विशेष सीएसएस और जावास्क्रिप्ट समाधान प्रदान करने के लिए किया जाता था। कोई अन्य ब्राउज़र इन टिप्पणियों का व्याख्यान नहीं करता था और ऐसी ही समान विशेषता नहीं प्रदान करता था।
इन टिप्पणियों के लिए अलग-अलग वाक्यविन्यास के उदाहरण निम्नलिखित हैं।
<head> <title>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <link href="not_ie.css" rel="stylesheet" type="text/css">
</head>
आलोचक
जब ब्राउज़र अपडेट होते हैं तो हैक्स का उपयोग करके कोड को छिपाने से अक्सर पृष्ठों को गलत रूप में प्रदर्शित होने का सामना करना पड़ता है। ये हैक्स नए ब्राउज़र में अप्रत्याशित व्यवहार के कारण ले जा सकते हैं जो उन्हें पूर्वावलोकन की तुलना में भिन्न विधियों से व्याख्या कर सकते हैं। इंटरनेट एक्सप्लोरर 6 और 7 का उपयोग कम हो गया है, इसलिए सीएसएस हैक्स भी कम हो गए हैं। आधुनिक तकनीकों में विशेषता निर्दिष्टि करने के तरीके कम उत्कृष्ट और त्रुटि प्रवण होते हैं।।
विकल्प
ब्राउज़र उपसर्ग
सबसे लोकप्रिय ब्राउज़र प्रतिपादन (कंप्यूटर ग्राफिक्स) इंजनों में से प्रत्येक का प्रयोगात्मक गुणों के लिए अपना स्वयं का विक्रेता उपसर्ग है। यद्यपि, लाइव कोड में इन गुणों के प्रसार के कारण, ब्राउज़र विक्रेताओं ने अभिलक्षण फ़्लैग के पक्ष में इस अभ्यास से दूर जाना प्रारंभ कर दिया है।[2]
सबसे लोकप्रिय ब्राउज़र प्रतिपादन इंजनों में प्रत्येक का अपना प्रयोगशील गुणों के लिए विक्रेता उपसर्ग होता है। यद्यपि, जीवंत कोड में इन गुणों की प्रसार के कारण, ब्राउज़र उपसर्ग इस प्रथा से दूर होने की ओर बढ़ रहे हैं और फ़ीचर फ़्लैग को प्राथमिकता दे रहे हैं।
उपसर्गों की सूची
निम्नलिखित विभिन्न लेआउट इंजनों से उपसर्गों की एक सूची है:
| विक्रेता उपसर्ग | उपयोग में | विन्यास इंजन | के द्वारा निर्मित | के द्वारा उपयोग |
|---|---|---|---|---|
-ah- |
हाँ | फ़ॉर्मेटर | एंटीना हाउस | ऐन्टेना हाउस फ़ॉर्मेटर |
-apple- |
हाँ | वेबकिट | एप्पल इंक. | एप्पल सफारी 2.0, ओपेरा विजेट्स, वेबकिट-आधारित ब्राउज़र (विरासत उपसर्ग के रूप में) |
-atsc- |
उन्नत टेलीविज़न प्रणाली समिति मानक | |||
-epub- |
हाँ | WebKit | ईपीयूबी वर्किंग ग्रुप | क्रोमियम/गूगल क्रोम, वेबकिट-आधारित ब्राउज़र |
-fx- |
हाँ | सन माइक्रोसिस्टम्स (अब ओरेकल कॉर्पोरेशन द्वारा अधिग्रहीत) | जावाएफएक्स अनुप्रयोग | |
-hp- |
हेवलेट-पैकार्ड (अब एचपी इंक. और हेवलेट पैकर्ड एंटरप्राइज) | |||
-khtml- |
हाँ
हाँ |
केएचटीएमएल / वेबकिट | केडीई | केडीई कॉन्करर/एप्पल सफारी 1.1 से सफारी 2.0 तक, वेबकिट-आधारित ब्राउज़र (एक विरासत उपसर्ग के रूप में) |
-moz- |
हाँ | गेको | मोज़िला फाउंडेशन | गेको-आधारित ब्राउज़र[?], मोज़िला फ़ायरफ़ॉक्स |
-ms- |
हाँ | ट्राइडेंट / एमएसएचटीएमएल | माइक्रोसॉफ़्ट कॉर्पोरेशन | माइक्रोसॉफ्ट अंतर्जाल अन्वेषक |
mso- |
कार्यालय | माइक्रोसॉफ़्ट कॉर्पोरेशन | माइक्रोसॉफ्ट ऑफिस[?] | |
-o- |
हाँ | शीघ्रगामी | ओपेरा सॉफ्टवेयर | संस्करण 12.16 तक ओपेरा डेस्कटॉप ब्राउज़र, संस्करण 12.1 तक ओपेरा मिनी और ओपेरा मोबाइल, निंटेंडो डीएसऔर निंटेंडो डीएसआई ब्राउज़र, निंटेंडो Wii इंटरनेट चैनल |
prince- |
हाँ | प्रिंस | यस लौजिक | यसलॉजिक प्रिंस |
-rim- |
वेबकिट | ब्लैकबेरी लिमिटेड | रिम ब्लैकबेरी ब्राउज़र | |
-ro- |
हाँ | एमएआरटीएच ए | रियलऑब्जेक्ट्स | रियलऑब्जेक्ट्स पीडीएफरिएक्टर |
-tc- |
लम्बे घटक | लम्बे घटक | ||
-wap- |
हाँ | शीघ्रगामी | वैप फोरम | ओपेरा डेस्कटॉप ब्राउज़र और ओपेरा मोबाइल, WAP फोरम |
-webkit- |
हाँ | वेबकिट/ब्लिंक | एप्पल इंक. (वेबकिट)/गूगल इंक. (ब्लिंक)) | एप्पल सफारी और सफारी फॉरआईओएस (वेबकिट), क्रोमियम / गूगल क्रोम डेस्कटॉप और मोबाइल (ब्लिंक), ओपेरा डेस्कटॉप और मोबाइल संस्करण 14 से (ब्लिंक), एंड्रॉइड ब्राउज़र (ब्लिंक), नोकिया मीगो ब्राउज़र 8.5, नोकिया सिम्बियन ब्राउज़र 7.0 और उसके बाद (वेबकिट), ब्लैकबेरी ब्राउज़र 6.0 और उसके बाद (वेबकिट)। |
-xv- |
हाँ | शीघ्रगामी | ओपेरा सॉफ्टवेयर | विंडोज़ 2000/एक्सपी के लिए ओपेरा डेस्कटॉप ब्राउज़र |
उदाहरण
/* Cross-browser css3 linear-gradient */
.linear-gradient {
/* Gecko browser (Firefox) */
background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);
/* Opera */
background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);
/* older Webkit syntax */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #D7D), color-stop(1, #068));
/* Webkit (Safari, Chrome, iOS, Android) */
background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);
/* W3C */
background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);
}
प्रतिबंध
विक्रेता उपसर्ग को उन विशेषताओं के लिए डिज़ाइन किया गया था जो विकास के अधीन थे, जिसका अर्थ है कि यह वाक्यविन्यास अंतिम नहीं हो सकता है। इसके अतिरिक्त,प्रत्येक ब्राउज़र के प्रयोगशीलता के लिए नियम जोड़ना जब आप बहुत सारे ब्राउज़र्स का समर्थन करना चाहते हैं, इस परिणामस्वरूप, प्रमुख ब्राउज़र विक्रेताओं विक्रेता उपसर्ग की अतिरिक्त @supports फ़ीचर क्वेरी जैसे अन्य विधियों का समर्थन करते हुए आगे बढ़ रहे हैं।
अभिलक्षण विलोपन
जावास्क्रिप्ट अभिलक्षण संसूचक
विशेषता के बारे में जानने के लिए कई जावास्क्रिप्ट पुस्तकालय उपस्थित हैं जिसका उपयोग किया जाता है जिससे सीएसएस नियम उन्हें लक्षित कर सकें। नवीनीकरण जैसी पुस्तकालय html तत्व में श्रेणियों को जोड़ती हैं, जिससे सीएसएस नियम जैसे ..cssgradients .headerलिखे जा सकते हैं। .
अभिलक्षण परिप्रश्न
सीएसएस 3 में एक नई विशेषता जिसे अभिलक्षण क्वेरी के रूप में जाना जाता है, इंट्रोड्यूस हुई है, जो सीएसएस के भीतर विशेषता की पहचान करने की अनुमति देती है यह नया निर्देशिका एक विशेषता के समर्थन या असमर्थन की जांच के लिए उपयोग किया जा सकता है, और जांच को 'और', 'या', और 'नहीं' के साथ कम्बाइन किया जा सकता है।स्वाभाविक रूप से, @supports नियम केवल उन ब्राउज़र्स पर काम करेंगे जो @supports.का समर्थन करते हैं।
header {
display: block;
}
@supports (display: flex) {
header {
display: flex;
}
}
स्क्रिप्ट पॉलीफिल
जबकि जावास्क्रिप्ट विशेषता संसूचना और @supports नियम ऐसे ब्राउज़र को लक्षित करने में मदद कर सकते हैं जिन्हें फॉलबैक कार्यक्षमता की आवश्यकता होती है, वे केवल विशेष ब्राउज़रों में बगों को संबोधित करेंगे या उन्नत कार्यक्षमता को सक्षम नहीं करेंगे। पॉलीफ़िल, (प्रोग्रामिंग) जो सभी ब्राउज़रों में व्यवहार को संगत बनाने के लिए स्क्रिप्ट का उपयोग करते हैं, नए सीएसएस नियमों के समर्थन को जोड़ने के साथ-साथ विशेष ब्राउज़रों में बगों को ठीक करने के लिए उपयोग किए जा सकते हैं। चूंकि पॉलीफ़िल उन ब्राउज़रों में कार्यक्षमता जोड़ते या ठीक करते हैं जिनके पास यह नहीं है, वे अभिलक्षण क्वेरीज़ के सापेक्ष में एक अलग उद्देश्य की पूर्ति करते हैं, लेकिन उनके साथ संयोजन में उपयोग किया जा सकता है।
- सशर्त टिप्पणियाँ
संदर्भ
- ↑ Paul Irish (2009-04-15). "ब्राउज़र सीएसएस हैक". www.paulirish.com. Retrieved 8 June 2022.
- ↑ "विक्रेता उपसर्ग". Mozilla Developer Network. Retrieved 2016-10-12.
बाहरी संबंध
- Browser Strangeness – Jeff Clayton's Live सीएसएस hacks and tests to filter for mainstream browsers, including the only known सीएसएस Hacks for Safari 7 and 8
- browserhacks.com – Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
- Safari/Webkit (webkit) prefix filters refix filters]
- Mozilla (moz) prefix filters
- Opera (wap) prefix filters – This page has all of Opera's सीएसएस selectors.
- सीएसएस Filters – A fairly complete table of सीएसएस hacks which show and hide rules from specific browsers.
- Filters and Cross-Over – सीएसएस filters. Parsing errors marked red.
- – सीएसएस Browser Selector – Allows to combine browser specific सीएसएस in single stylesheet (using JavaScript).
- – #IEroot – Targeting IE with a single stylesheet containing all सीएसएस (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root [div])
- How to target only IE (any version) within a stylesheet? – discussion on StackOverflow
- Apply style ONLY on IE – discussion on StackOverflow
- सीएसएस Comments - How to add comments in सीएसएस
