सीएसएस हैक

यह लेख एक सीएसएस तकनीक के बारे में है. स्वामित्व वाली माइक्रोसॉफ्ट-विशिष्ट सीएसएस संपत्ति के साथ भ्रमित न हों.

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

हैक के प्रकार

अमान्य या गैर-अनुपालन सीएसएस

विभिन्न ब्राउज़र्स द्वारा सीएसएस के व्याख्यान में विचित्रताओं के कारण, अधिकांश सीएसएस हैक्स ऐसी अमान्य सीएसएस नियमों को लिखने के आधार पर काम करते हैं जो केवल विशेष ब्राउज़र्स द्वारा व्याख्यान किए जाते हैं, या विशेष ब्राउज़र्स में बग्स पर आश्रित होते हैं। इसका एक उदाहरण है नियमों को अंडरस्कोर के साथ प्रथम करना (जैसे _विस्तार) जिससे इंटरनेट अंवेषक 6 को लक्षित किया जा सके - अन्य ब्राउज़र्स इस लाइन को ध्यान नहीं देंगे, जिससे एक ब्राउज़र के लिए विशेष कोड लिखने के लिए उपयोग किया जा सके।।

प्रायः ऐसे ही सीएसएस हैक उपयोग करते हैं जो एस्टेरिस्क, अनुपस्थित व्हाइटस्पेस, और सीएसएस टिप्पणियों की तरह वाक्य - विन्यास त्रुटि उत्पन्न करते हैं। इसके अतिरिक्त, इंटरनेट अंवेषक 6 और 7 में, ! महत्वपूर्ण घोषणा को वाक्यांश के उत्क्रमांक के बाद किसी भी शृंखला के रूप में मान्यता प्राप्त होती है, जैसे !ie.

असमर्थित सीएसएस

यद्यपि, नवीनतम सीएसएस नियमानुसार बने नियम पुराने ब्राउज़र्स द्वारा "अमान्य" के रूप में अनदेखा किए जाते हैं। पुराने नियमों के उपरांत नवीनतम नियमों को लिखकर उन पुराने नियमों को रद्द करने या संशोधित करने के माध्यम से, पुराने ब्राउज़र्स पर केवल निश्चित नियमों को सक्रिय करना संभव है।

सशर्त टिप्पणियां

Main article: सशर्त टिप्पणियाँ

इंटरनेट अंवेषक के 10 संस्करण से पहले, एक विशेष टिप्पणी धारा को इंटरनेट अंवेषक द्वारा समर्थित किया जाता था जो केवल निश्चित संस्करणों के ब्राउज़र द्वारा ही पठित की जा सकती थी। इन टिप्पणियों का अधिकांश उपयोग पुराने ब्राउज़र के लिए विशेष सीएसएस और जावास्क्रिप्ट समाधान प्रदान करने के लिए किया जाता था। कोई अन्य ब्राउज़र इन टिप्पणियों का व्याख्यान नहीं करता था और ऐसी ही समान विशेषता नहीं प्रदान करता था।

इन टिप्पणियों के लिए अलग-अलग वाक्यविन्यास के उदाहरण निम्नलिखित हैं।

 <शीर्षक>परीक्षण</शीर्षक>
 <लिंक href= all_browsers.सीएसएस         rel= स्टाइलशीट टाइप= टेक्स्ट/सीएसएस >  
 <![अनदेखा करें[> <लिंक href= हालिया.सीएसएस rel= स्टाइलशीट प्रकार= पाठ/सीएसएस> 
  <लिंक href= not_ie.सीएसएस         rel= स्टाइलशीट टाइप= टेक्स्ट/सीएसएस > 

आलोचक

हैक्स का उपयोग करके कोड को छिपाने से प्रायः यह समस्या उत्पन्न होती है कि जब ब्राउज़र अपडेट होते हैं, तो पृष्ठों को गलत ढंग से प्रदर्शित किया जाता है। ये हैक्स नवीनतम ब्राउज़र में अपने पूर्वजों से अलग रूप से इन्टरप्रिट कर सकते हैं, जिससे अनपेक्षित व्यवहार हो सकता है। इंटरनेट अन्वेषक 6 और 7 का उपयोग धीरे-धीरे बंद हो चुका है, इसलिए सीएसएस हैक्स की भी कमी हो गई है। विशेषता लक्ष्यित करने के आधुनिक विधियाँ कम भंगुर और त्रुटि-प्रवृत्ति होते हैं।

विकल्प

ब्राउज़र उपसर्ग

सबसे लोकप्रिय ब्राउज़र प्रतिपादन (कंप्यूटर ग्राफिक्स) इंजनों में से प्रत्येक का प्रयोगात्मक गुणों के लिए अपना स्वयं का विक्रेता उपसर्ग है। यद्यपि, लाइव कोड में इन गुणों के प्रसार के कारण, ब्राउज़र विक्रेताओं ने फीचर फ़्लैग के पक्ष में इस अभ्यास से दूर जाना शुरू कर दिया है।

सबसे लोकप्रिय ब्राउज़र प्रतिपादन इंजनों में प्रत्येक का अपना प्रयोगशील गुणों के लिए विक्रेता उपसर्ग होता है। यद्यपि, जीवंत कोड में इन गुणों की प्रसार के कारण, ब्राउज़र उपसर्ग इस प्रथा से दूर होने की ओर बढ़ रहे हैं और फ़ीचर फ़्लैग को प्राथमिकता दे रहे हैं।

उपसर्गों की सूची

निम्नलिखित विभिन्न लेआउट इंजनों से उपसर्गों की एक सूची है:

विक्रेता उपसर्ग	उपयोग में	विन्यास इंजन	के द्वारा निर्मित	के द्वारा उपयोग
-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-	हाँ	MARTHA	रियलऑब्जेक्ट्स	रियलऑब्जेक्ट्स पीडीएफरिएक्टर
-tc-			लम्बे घटक	लम्बे घटक
-wap-	हाँ	शीघ्रगामी	वैप फोरम	ओपेरा डेस्कटॉप ब्राउज़र और ओपेरा मोबाइल, WAP फोरम
-webkit-	हाँ	वेबकिट/Blink	एप्पल इंक. (वेबकिट)/गूगल इंक. (ब्लिंक))	एप्पल सफारी और सफारी फॉरआईओएस (वेबकिट), क्रोमियम / गूगल क्रोम डेस्कटॉप और मोबाइल (ब्लिंक), ओपेरा डेस्कटॉप और मोबाइल संस्करण 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.

फ़ीचर प्रश्न

फीचर क्वेश्चन के रूप में जानी जाने वाली एक नई सुविधा को सीएसएस में पेश किया गया था, जिससे सीएसएस के भीतर विशिष्ट कार्यक्षमता का पता लगाने की अनुमति मिलती है (फीचर डिटेक्शन (वेब ​​डेवलपमेंट) के लिए जावास्क्रिप्ट लाइब्रेरी के उपयोग की आवश्यकता के बिना)। इस नए निर्देश का उपयोग किसी विशिष्ट सुविधा के लिए समर्थन या समर्थन की कमी की जांच के लिए किया जा सकता है, और चेक को इसके साथ जोड़ा जा सकता है and, or, और not. ज़ाहिर तौर से, @supports नियम केवल समर्थित ब्राउज़रों पर काम करेंगे @supports.

header {
    display: block;
}

@supports (display: flex) {
    header {
        display: flex;
    }
}

स्क्रिप्ट पॉलीफिल

जबकि जावास्क्रिप्ट फीचर डिटेक्शन और @supports नियम उन ब्राउज़रों को लक्षित करने में मदद कर सकते हैं जिन्हें फ़ॉलबैक कार्यक्षमता की आवश्यकता होती है, वे विशिष्ट ब्राउज़रों में बग्स को संबोधित नहीं करेंगे या उस उन्नत कार्यक्षमता को सक्षम नहीं करेंगे। पॉलीफ़िल (प्रोग्रामिंग), स्क्रिप्ट जो सभी ब्राउज़रों में व्यवहार को सुसंगत बनाती हैं, का उपयोग नए सीएसएस नियमों (उदाहरण के लिए, IE 8 में मीडिया के प्रश्नों ़) के लिए समर्थन जोड़ने के साथ-साथ विशिष्ट ब्राउज़रों में बग्स को ठीक करने के लिए किया जा सकता है। चूंकि पॉलीफ़िल उन ब्राउज़रों में कार्यक्षमता जोड़ते या ठीक करते हैं जिनके पास यह नहीं है, वे फ़ीचर क्वेरीज़ की तुलना में एक अलग उद्देश्य की पूर्ति करते हैं, लेकिन उनके साथ संयोजन में उपयोग किया जा सकता है।

• सशर्त टिप्पणियाँ

बाहरी संबंध

• 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 सीएसएस