सीएसएस हैक

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

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

हैक के प्रकार

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

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

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

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

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

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

Main article: Conditional comment

संस्करण 10 से पहले, इंटरनेट एक्सप्लोरर एक विशेष टिप्पणी सिंटैक्स का समर्थन करता था जो HTML के ब्लॉक को केवल ब्राउज़र के विशिष्ट संस्करणों द्वारा पढ़ने की अनुमति देता था। इन टिप्पणियों का उपयोग ज्यादातर ब्राउज़र के पुराने संस्करणों के लिए विशिष्ट सीएसएस और जावास्क्रिप्ट वर्कअराउंड प्रदान करने के लिए किया जाता है। किसी अन्य ब्राउज़र ने इन टिप्पणियों की व्याख्या नहीं की या समान कार्यक्षमता की पेशकश नहीं की।

इन टिप्पणियों के लिए विभिन्न सिंटैक्स के उदाहरण निम्नलिखित हैं। <वाक्यविन्यास लैंग = html4सख्त> <सिर>

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

</ सिर> </वाक्यविन्यास हाइलाइट>

आलोचक

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

विकल्प

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

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

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

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

Vendor Prefix	In Use	Layout Engine	Created by	Used by
-ah-	Yes	Formatter	Antenna House	Antenna House Formatter
-apple-	Yes	WebKit	Apple Inc.	Apple Safari 2.0, Opera Widgets, WebKit-Based Browsers (as legacy prefix)
-atsc-			Advanced Television Systems Committee standards
-epub-	Yes	WebKit	EPUB Working Group	Chromium / Google Chrome, WebKit-Based Browsers
-fx-	Yes		Sun Microsystems (now acquired by Oracle Corporation)	JavaFX applications
-hp-			Hewlett-Packard (now HP Inc. and Hewlett Packard Enterprise)
-khtml-	Yes / yes	KHTML / WebKit	KDE	KDE Konqueror / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)
-moz-	Yes	Gecko	Mozilla Foundation	Gecko-Based Browsers[?], Mozilla Firefox
-ms-	Yes	Trident / MSHTML	Microsoft Corporation	Microsoft Internet Explorer
mso-		Office	Microsoft Corporation	Microsoft Office[?]
-o-	Yes	Presto	Opera Software	Opera desktop Browser up to version 12.16, Opera Mini, and Opera Mobile up to version 12.1, Nintendo DS & Nintendo DSi Browser, Nintendo Wii Internet Channel
prince-	Yes	Prince	YesLogic	YesLogic Prince
-rim-		WebKit	BlackBerry Limited	RIM Blackberry Browser
-ro-	Yes	MARTHA	RealObjects	RealObjects PDFreactor
-tc-			TallComponents	TallComponents
-wap-	Yes	Presto	The WAP Forum	Opera Desktop Browser and Opera Mobile, The WAP Forum
-webkit-	yes	WebKit/Blink	Apple Inc. (WebKit)/Google Inc. (Blink)	Apple Safari & Safari for iOS (WebKit), Chromium / Google Chrome desktop and mobile (Blink), Opera desktop and mobile from version 14 (Blink), Android browser (Blink), Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 and later (WebKit), Blackberry Browser 6.0 and later (WebKit).
-xv-	No	Presto	Opera Software	Opera Desktop Browser for Windows 2000/XP

उदाहरण

/* 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 सीएसएस