सीएसएस हैक

This article is about a CSS technique. Not to be confused with the proprietary Microsoft-specific CSS property.

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

हैक के प्रकार

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

विभिन्न ब्राउज़रों द्वारा सीएसएस की व्याख्या में गड़बड़ी के कारण, अधिकांश सीएसएस हैक्स में अमान्य सीएसएस नियम लिखना शामिल है जो केवल विशिष्ट ब्राउज़रों द्वारा व्याख्या किए जाते हैं, या विशिष्ट ब्राउज़रों में बगों पर निर्भर होते हैं। इसका एक उदाहरण एक अंडरस्कोर के साथ नियमों को उपसर्ग करना है (जैसा कि _width) Internet Explorer 6 को लक्षित करने के लिए—अन्य ब्राउज़र लाइन को अनदेखा कर देंगे, जिससे इसे एक वेब ब्राउज़र के लिए विशिष्ट कोड लिखने के लिए उपयोग करने की अनुमति मिलती है।

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

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

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

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

Main article: Conditional comment

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

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

 <शीर्षक>परीक्षण</शीर्षक>
 <लिंक href= all_browsers.css rel= स्टाइलशीट टाइप= टेक्स्ट/सीएसएस >  
 <![अनदेखा करें[> <लिंक href= हालिया.सीएसएस rel= स्टाइलशीट प्रकार= पाठ/सीएसएस> 
  <लिंक href= not_ie.css 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 सुविधा संबंधी प्रश्न।

फीचर विलोपन

जावास्क्रिप्ट फीचर डिटेक्शन

किसी विशेष ब्राउज़र में कौन-सी सुविधाएँ उपलब्ध हैं, इसका पता लगाने के लिए एकाधिक जावास्क्रिप्ट लाइब्रेरी मौजूद हैं ताकि उन्हें लक्षित करने के लिए CSS नियमों को लिखा जा सके। मॉडर्निज़र जैसे पुस्तकालय इसमें कक्षाएं जोड़ते हैं html तत्व, जैसे सीएसएस नियमों के लिए अनुमति देता है .cssgradients .header.

फ़ीचर प्रश्न

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

header {
    display: block;
}

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

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

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

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

बाहरी संबंध

• Browser Strangeness – Jeff Clayton's Live CSS hacks and tests to filter for mainstream browsers, including the only known CSS 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 CSS selectors.
• CSS Filters – A fairly complete table of CSS hacks which show and hide rules from specific browsers.
• Filters and Cross-Over – CSS filters. Parsing errors marked red.
• – CSS Browser Selector – Allows to combine browser specific CSS in single stylesheet (using JavaScript).
• – #IEroot – Targeting IE with a single stylesheet containing all CSS (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
• CSS Comments - How to add comments in CSS