सीएसएस हैक: Difference between revisions

From Vigyanwiki
No edit summary
No edit summary
 
(6 intermediate revisions by 3 users not shown)
Line 9: Line 9:
विभिन्न ब्राउज़र्स द्वारा सीएसएस के व्याख्यान में विचित्रताओं के कारण, अधिकांश सीएसएस हैक्स ऐसी अमान्य सीएसएस नियमों को लिखने के आधार पर काम करते हैं जो केवल विशेष ब्राउज़र्स द्वारा व्याख्यान किए जाते हैं, या विशेष ब्राउज़र्स में बग्स पर आश्रित होते हैं। इसका एक उदाहरण है नियमों को अंडरस्कोर के साथ प्रथम करना (जैसे _विस्तार) जिससे इंटरनेट अंवेषक 6 को लक्षित किया जा सके - अन्य ब्राउज़र्स इस लाइन को ध्यान नहीं देंगे, जिससे एक ब्राउज़र के लिए विशेष कोड लिखने के लिए उपयोग किया जा सके।।
विभिन्न ब्राउज़र्स द्वारा सीएसएस के व्याख्यान में विचित्रताओं के कारण, अधिकांश सीएसएस हैक्स ऐसी अमान्य सीएसएस नियमों को लिखने के आधार पर काम करते हैं जो केवल विशेष ब्राउज़र्स द्वारा व्याख्यान किए जाते हैं, या विशेष ब्राउज़र्स में बग्स पर आश्रित होते हैं। इसका एक उदाहरण है नियमों को अंडरस्कोर के साथ प्रथम करना (जैसे _विस्तार) जिससे इंटरनेट अंवेषक 6 को लक्षित किया जा सके - अन्य ब्राउज़र्स इस लाइन को ध्यान नहीं देंगे, जिससे एक ब्राउज़र के लिए विशेष कोड लिखने के लिए उपयोग किया जा सके।।


इसी तरह के सीएसएस हैक्स में संपत्ति के नामों के आसपास तारांकन, लापता व्हाट्सएप और सीएसएस टिप्पणियों जैसी सिंटैक्स त्रुटियों को प्रेरित करना शामिल है। इसके अतिरिक्त, [[इंटरनेट एक्सप्लोरर|इंटरनेट अंवेषक]] 6 और 7 में, <code>!important</code> घोषणा को विस्मयादिबोधक चिह्न के बाद किसी भी स्ट्रिंग के रूप में पहचाना जाता है, उदा। <code>!ie</code>.<ref>{{cite web |title=ब्राउज़र सीएसएस हैक|author=Paul Irish |url=https://www.paulirish.com/2009/browser-specific-css-hacks/ |website=www.paulirish.com |access-date=8 June 2022 |date=2009-04-15}}</ref>
प्रायः ऐसे ही सीएसएस हैक उपयोग करते हैं जो एस्टेरिस्क, अनुपस्थित व्हाइटस्पेस, और सीएसएस टिप्पणियों की तरह वाक्य - विन्यास त्रुटि उत्पन्न करते हैं। इसके अतिरिक्त, इंटरनेट अंवेषक 6 और 7 में, ! महत्वपूर्ण घोषणा को वाक्यांश के उत्क्रमांक के बाद किसी भी शृंखला के रूप में मान्यता प्राप्त होती है, जैसे  <code>!ie</code>.<ref>{{cite web |title=ब्राउज़र सीएसएस हैक|author=Paul Irish |url=https://www.paulirish.com/2009/browser-specific-css-hacks/ |website=www.paulirish.com |access-date=8 June 2022 |date=2009-04-15}}</ref>




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


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


इन टिप्पणियों के लिए विभिन्न सिंटैक्स के उदाहरण निम्नलिखित हैं।
इंटरनेट अंवेषक के 10 संस्करण से पहले, एक विशेष टिप्पणी धारा को इंटरनेट अंवेषक द्वारा समर्थित किया जाता था जो केवल निश्चित संस्करणों के ब्राउज़र द्वारा ही पठित की जा सकती थी। इन टिप्पणियों का अधिकांश उपयोग पुराने ब्राउज़र के लिए विशेष सीएसएस और जावास्क्रिप्ट समाधान प्रदान करने के लिए किया जाता था। कोई अन्य ब्राउज़र इन टिप्पणियों का व्याख्यान नहीं करता था और ऐसी ही समान विशेषता नहीं प्रदान करता था।
<वाक्यविन्यास लैंग = html4सख्त>
 
<सिर>
इन टिप्पणियों के लिए अलग-अलग वाक्यविन्यास के उदाहरण निम्नलिखित हैं।
  <शीर्षक>परीक्षण</शीर्षक>
<head>
  <लिंक href= all_browsers.सीएसएस        rel= स्टाइलशीट टाइप= टेक्स्ट/सीएसएस >   
  <title>Test</title>
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->  
  <link href="all_browsers.css" rel="stylesheet" type="text/css">
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<nowiki>  <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--></nowiki>
  <!--[if !lt IE 7]> <![IGNORE[--><![अनदेखा करें[> <लिंक href= हालिया.सीएसएस rel= स्टाइलशीट प्रकार= पाठ/सीएसएस> <!--<![endif]-->
<nowiki>  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--></nowiki>
  <!--[if !IE]--> <लिंक href= not_ie.सीएसएस        rel= स्टाइलशीट टाइप= टेक्स्ट/सीएसएस > <!--<![endif]-->
  <!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <nowiki><link href="recent.css" rel="stylesheet" type="text/css"></nowiki> <!--<![endif]-->
</ सिर>
  <!--[if !IE]--> <nowiki><link href="not_ie.css" rel="stylesheet" type="text/css"></nowiki> <!--<![endif]-->
</वाक्यविन्यास हाइलाइट>
 
</head>


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


== विकल्प ==
== विकल्प ==


=== ब्राउज़र उपसर्ग ===
=== ब्राउज़र उपसर्ग ===
सबसे लोकप्रिय ब्राउज़र [[ प्रतिपादन (कंप्यूटर ग्राफिक्स) ]] इंजनों में से प्रत्येक का प्रयोगात्मक गुणों के लिए अपना स्वयं का [[विक्रेता उपसर्ग]] है। हालांकि, लाइव कोड में इन गुणों के प्रसार के कारण, ब्राउज़र [[विक्रेताओं]] ने फीचर फ़्लैग के पक्ष में इस अभ्यास से दूर जाना शुरू कर दिया है।<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix|title=विक्रेता उपसर्ग|website=Mozilla Developer Network|access-date=2016-10-12}}</ref>
सबसे लोकप्रिय ब्राउज़र [[ प्रतिपादन (कंप्यूटर ग्राफिक्स) |प्रतिपादन (कंप्यूटर ग्राफिक्स)]] इंजनों में से प्रत्येक का प्रयोगात्मक गुणों के लिए अपना स्वयं का [[विक्रेता उपसर्ग]] है। यद्यपि, लाइव कोड में इन गुणों के प्रसार के कारण, ब्राउज़र [[विक्रेताओं]] ने अभिलक्षण फ़्लैग के पक्ष में इस अभ्यास से दूर जाना प्रारंभ कर दिया है।<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix|title=विक्रेता उपसर्ग|website=Mozilla Developer Network|access-date=2016-10-12}}</ref>
 
सबसे लोकप्रिय ब्राउज़र [[ प्रतिपादन (कंप्यूटर ग्राफिक्स) |प्रतिपादन]] इंजनों में प्रत्येक का अपना प्रयोगशील गुणों के लिए [[विक्रेता उपसर्ग]] होता है। यद्यपि, जीवंत कोड में इन गुणों की प्रसार के कारण, ब्राउज़र उपसर्ग इस प्रथा से दूर होने की ओर बढ़ रहे हैं और फ़ीचर फ़्लैग को प्राथमिकता दे रहे हैं।
 




Line 44: Line 48:
{| class="wikitable"
{| class="wikitable"
|-
|-
! Vendor Prefix !! In Use   !! Layout Engine    !! Created by            !! Used by
!विक्रेता उपसर्ग
!उपयोग में
! विन्यास इंजन   !!के द्वारा निर्मित
!के द्वारा उपयोग
|-
|-
| <code>-ah-</code>          || Yes      || Formatter        || Antenna House        || Antenna House Formatter
| <code>-ah-</code>          ||हाँ
|फ़ॉर्मेटर
|एंटीना हाउस
|ऐन्टेना हाउस फ़ॉर्मेटर
|-
|-
| <code>-apple-</code>      || Yes      || [[WebKit]]          || [[Apple Inc.]]            || [[Safari (web browser)|Apple Safari 2.0]], Opera Widgets, [[Acid3#Chrome, Presto and WebKit based browsers|WebKit-Based Browsers (as legacy prefix)]]
| <code>-apple-</code>      ||हाँ
|वेबकिट
| [[Apple Inc.|एप्पल इंक.]]            ||एप्पल सफारी 2.0, ओपेरा विजेट्स, वेबकिट-आधारित ब्राउज़र (विरासत उपसर्ग के रूप में)
|-
|-
| <code>-atsc-</code>        ||          ||                  || [[Advanced Television Systems Committee standards]] ||  
| <code>-atsc-</code>        ||          ||                  || [[Advanced Television Systems Committee standards|उन्नत टेलीविज़न प्रणाली समिति मानक]] ||  
|-
|-
| <code>-epub-</code>        || Yes      || WebKit          || [[EPUB|EPUB Working Group]]    || [[Chromium (web browser)|Chromium]] / [[Google Chrome]], WebKit-Based Browsers
| <code>-epub-</code>        ||हाँ
| WebKit          || [[EPUB|ईपीयूबी वर्किंग ग्रुप]]    ||क्रोमियम/गूगल क्रोम, वेबकिट-आधारित ब्राउज़र
|-
|-
| <code>-fx-</code>          || Yes      ||                 || [[Sun Microsystems]] (now acquired by [[Oracle Corporation]]) || [[JavaFX]] applications
| <code>-fx-</code>          ||हाँ
| ||सन माइक्रोसिस्टम्स (अब ओरेकल कॉर्पोरेशन द्वारा अधिग्रहीत)
|जावाएफएक्स अनुप्रयोग
|-
|-
| <code>-hp-</code>          ||          ||                  || [[Hewlett-Packard]] (now [[HP Inc.]] and [[Hewlett Packard Enterprise]])     ||  
| <code>-hp-</code>          ||          ||                  ||हेवलेट-पैकार्ड (अब एचपी इंक. और हेवलेट पैकर्ड एंटरप्राइज)
|
|-
|-
| <code>-khtml-</code>      || Yes / yes || [[KHTML]] / WebKit   || [[KDE]]                  || KDE [[Konqueror]] / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)
| <code>-khtml-</code>      ||हाँ
 
हाँ
| [[KHTML|केएचटीएमएल]] / वेबकिट   || [[KDE|केडीई]]                  ||केडीई कॉन्करर/एप्पल सफारी 1.1 से सफारी 2.0 तक, वेबकिट-आधारित ब्राउज़र (एक विरासत उपसर्ग के रूप में)
|-
|-
| <code>-moz-</code>        || Yes      || [[Gecko (software)|Gecko]]            || [[Mozilla Foundation]]    || Gecko-Based Browsers[?], Mozilla Firefox
| <code>-moz-</code>        ||हाँ
|गेको
| [[Mozilla Foundation|मोज़िला फाउंडेशन]]    ||गेको-आधारित ब्राउज़र[?], मोज़िला फ़ायरफ़ॉक्स
|-
|-
| <code>-ms-</code>          || Yes      || [[Trident (layout engine)|Trident]] / MSHTML || [[Microsoft Corporation]] || [[Internet Explorer|Microsoft Internet Explorer]]
| <code>-ms-</code>          ||हाँ
| [[Trident (layout engine)|ट्राइडेंट]] / एमएसएचटीएमएल || [[Microsoft Corporation|माइक्रोसॉफ़्ट कॉर्पोरेशन]] ||माइक्रोसॉफ्ट अंतर्जाल अन्वेषक
|-
|-
| <code>mso-</code>          ||          || Office          || Microsoft Corporation || Microsoft Office[?]
| <code>mso-</code>          ||          ||कार्यालय
|माइक्रोसॉफ़्ट कॉर्पोरेशन
|माइक्रोसॉफ्ट ऑफिस[?]
|-
|-
| <code>-o-</code>          || Yes      || [[Presto (layout engine)|Presto]]          || [[Opera Software]]        || [[Opera (web browser)|Opera desktop Browser up to version 12.16]], [[Opera Mini]], and [[Opera Mobile|Opera Mobile up to version 12.1]], [[Nintendo DS]] & [[Nintendo DSi]] Browser, Nintendo Wii Internet Channel
| <code>-o-</code>          ||हाँ
|शीघ्रगामी
| [[Opera Software|ओपेरा सॉफ्टवेयर]]        || संस्करण 12.16 तक ओपेरा डेस्कटॉप ब्राउज़र, संस्करण 12.1 तक ओपेरा मिनी और ओपेरा मोबाइल, निंटेंडो डीएसऔर निंटेंडो डीएसआई ब्राउज़र, निंटेंडो Wii इंटरनेट चैनल
|-
|-
| <code>prince-</code>      || Yes      || [[Prince (software)|Prince]]          || [[YesLogic]]              || YesLogic Prince
| <code>prince-</code>      ||हाँ
| [[Prince (software)|प्रिंस]]          ||यस लौजिक
|यसलॉजिक प्रिंस
|-
|-
| <code>-rim-</code>        ||          || WebKit        || [[BlackBerry Limited]]    || RIM Blackberry Browser
| <code>-rim-</code>        ||          ||वेबकिट
| [[BlackBerry Limited|ब्लैकबेरी लिमिटेड]]    ||रिम ब्लैकबेरी ब्राउज़र
|-
|-
| <code>-ro-</code>          || Yes      || MARTHA          || RealObjects          || RealObjects PDFreactor
| <code>-ro-</code>          ||हाँ
| एमएआरटीएच ए ||रियलऑब्जेक्ट्स
|रियलऑब्जेक्ट्स पीडीएफरिएक्टर
|-
|-
| <code>-tc-</code>          ||          ||                  || TallComponents        || TallComponents
| <code>-tc-</code>          ||          ||                  ||लम्बे घटक
|लम्बे घटक
|-
|-
| <code>-wap-</code>        || Yes      || Presto          || [[Open Mobile Alliance|The WAP Forum]]        || Opera Desktop Browser and Opera Mobile, The WAP Forum
| <code>-wap-</code>        ||हाँ
|शीघ्रगामी
|वैप फोरम
|ओपेरा डेस्कटॉप ब्राउज़र और ओपेरा मोबाइल, WAP फोरम
|-
|-
| <code class=nowrap>-webkit-</code>      || yes      || WebKit/Blink || [[Apple Inc.]] ([[WebKit]])/[[Google|Google Inc.]] ([[Blink (browser engine)|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).
| <code class=nowrap>-webkit-</code>      ||हाँ
| वेबकिट/ब्लिंक || एप्पल इंक. (वेबकिट)/गूगल इंक. (ब्लिंक))        ||एप्पल सफारी और सफारी फॉरआईओएस (वेबकिट), क्रोमियम / गूगल क्रोम डेस्कटॉप और मोबाइल (ब्लिंक), ओपेरा डेस्कटॉप और मोबाइल संस्करण 14 से (ब्लिंक), एंड्रॉइड ब्राउज़र (ब्लिंक), नोकिया मीगो ब्राउज़र 8.5, नोकिया सिम्बियन ब्राउज़र 7.0 और उसके बाद (वेबकिट), ब्लैकबेरी ब्राउज़र 6.0 और उसके बाद (वेबकिट)
|-
|-
| <code>-xv-</code>          || No        || Presto          || Opera Software        || Opera Desktop Browser for Windows 2000/XP
| <code>-xv-</code>          ||हाँ
|शीघ्रगामी
|ओपेरा सॉफ्टवेयर
|विंडोज़ 2000/एक्सपी के लिए ओपेरा डेस्कटॉप ब्राउज़र
|}
|}


Line 110: Line 149:




==== मर्यादा ====
==== प्रतिबंध ====
विक्रेता उपसर्ग उन सुविधाओं के लिए डिज़ाइन किए गए थे जो विकास के अधीन थे, जिसका अर्थ है कि सिंटैक्स अंतिम भी नहीं हो सकता है। साथ ही, जब आप कई ब्राउज़रों का समर्थन करना चाहते हैं तो प्रत्येक ब्राउज़र के फ़ंक्शन के कार्यान्वयन के लिए नियम जोड़ना अच्छी तरह से स्केल नहीं करता है। नतीजतन, प्रमुख ब्राउज़र विक्रेता अन्य तरीकों के पक्ष में विक्रेता उपसर्गों से दूर जा रहे हैं जैसे कि <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> सुविधा संबंधी प्रश्न।
विक्रेता उपसर्ग को उन विशेषताओं के लिए डिज़ाइन किया गया था जो विकास के अधीन थे, जिसका अर्थ है कि यह वाक्यविन्यास अंतिम नहीं हो सकता है। इसके अतिरिक्त,प्रत्येक ब्राउज़र के प्रयोगशीलता के लिए नियम जोड़ना जब आप बहुत सारे ब्राउज़र्स का समर्थन करना चाहते हैं, इस परिणामस्वरूप, प्रमुख ब्राउज़र विक्रेताओं विक्रेता उपसर्ग की अतिरिक्त <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> फ़ीचर क्वेरी जैसे अन्य विधियों का समर्थन करते हुए आगे बढ़ रहे हैं।


=== फीचर विलोपन ===
=== अभिलक्षण विलोपन ===


==== [[जावास्क्रिप्ट]] फीचर डिटेक्शन ====
==== [[जावास्क्रिप्ट]] अभिलक्षण संसूचक ====
किसी विशेष ब्राउज़र में कौन-सी सुविधाएँ उपलब्ध हैं, इसका पता लगाने के लिए एकाधिक जावास्क्रिप्ट लाइब्रेरी मौजूद हैं ताकि उन्हें लक्षित करने के लिए सीएसएस        नियमों को लिखा जा सके। मॉडर्निज़र जैसे पुस्तकालय इसमें कक्षाएं जोड़ते हैं <code>html</code> तत्व, जैसे सीएसएस नियमों के लिए अनुमति देता है <syntaxhighlight lang="CSS" inline>.cssgradients .header</syntaxhighlight>.
विशेषता के बारे में जानने के लिए कई [[जावास्क्रिप्ट]] पुस्तकालय उपस्थित हैं जिसका उपयोग किया जाता है जिससे [[सीएसएस]] नियम उन्हें लक्षित कर सकें। नवीनीकरण जैसी पुस्तकालय html तत्व में श्रेणियों को जोड़ती हैं, जिससे [[सीएसएस]] नियम जैसे .<syntaxhighlight lang="CSS" inline="">.cssgradients .header</syntaxhighlight>लिखे जा सकते हैं। .


==== फ़ीचर प्रश्न ====
==== अभिलक्षण परिप्रश्न ====


फीचर क्वेश्चन के रूप में जानी जाने वाली एक नई सुविधा को [[सीएसएस]] में पेश किया गया था, जिससे सीएसएस के भीतर विशिष्ट कार्यक्षमता का पता लगाने की अनुमति मिलती है ([[फीचर डिटेक्शन (वेब ​​डेवलपमेंट)]] के लिए जावास्क्रिप्ट लाइब्रेरी के उपयोग की आवश्यकता के बिना)। इस नए निर्देश का उपयोग किसी विशिष्ट सुविधा के लिए समर्थन या समर्थन की कमी की जांच के लिए किया जा सकता है, और चेक को इसके साथ जोड़ा जा सकता है <code>and</code>, <code>or</code>, और <code>not</code>. ज़ाहिर तौर से, <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> नियम केवल समर्थित ब्राउज़रों पर काम करेंगे <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight>. <syntaxhighlight lang="css">
[[सीएसएस]] 3 में एक नई विशेषता जिसे अभिलक्षण क्वेरी के रूप में जाना जाता है, इंट्रोड्यूस हुई है, जो [[सीएसएस]] के भीतर विशेषता की पहचान करने की अनुमति देती है यह नया निर्देशिका एक विशेषता के समर्थन या असमर्थन की जांच के लिए उपयोग किया जा सकता है, और जांच को 'और', 'या', और 'नहीं' के साथ कम्बाइन किया जा सकता है।स्वाभाविक रूप से, <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> नियम केवल उन ब्राउज़र्स पर काम करेंगे जो <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight>.का समर्थन करते हैं। <syntaxhighlight lang="css">
header {
header {
     display: block;
     display: block;
Line 134: Line 173:


=== स्क्रिप्ट पॉलीफिल ===
=== स्क्रिप्ट पॉलीफिल ===
जबकि जावास्क्रिप्ट फीचर डिटेक्शन और <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> नियम उन ब्राउज़रों को लक्षित करने में मदद कर सकते हैं जिन्हें फ़ॉलबैक कार्यक्षमता की आवश्यकता होती है, वे विशिष्ट ब्राउज़रों में बग्स को संबोधित नहीं करेंगे या उस उन्नत कार्यक्षमता को सक्षम नहीं करेंगे। [[पॉलीफ़िल (प्रोग्रामिंग)]], स्क्रिप्ट जो सभी ब्राउज़रों में व्यवहार को सुसंगत बनाती हैं, का उपयोग नए सीएसएस         नियमों (उदाहरण के लिए, IE 8 में [[ मीडिया के प्रश्नों ]]़) के लिए समर्थन जोड़ने के साथ-साथ विशिष्ट ब्राउज़रों में बग्स को ठीक करने के लिए किया जा सकता है। चूंकि पॉलीफ़िल उन ब्राउज़रों में कार्यक्षमता जोड़ते या ठीक करते हैं जिनके पास यह नहीं है, वे फ़ीचर क्वेरीज़ की तुलना में एक अलग उद्देश्य की पूर्ति करते हैं, लेकिन उनके साथ संयोजन में उपयोग किया जा सकता है।
जबकि जावास्क्रिप्ट विशेषता संसूचना और <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> नियम ऐसे ब्राउज़र को लक्षित करने में मदद कर सकते हैं जिन्हें फॉलबैक कार्यक्षमता की आवश्यकता होती है, वे केवल विशेष ब्राउज़रों में बगों को संबोधित करेंगे या उन्नत कार्यक्षमता को सक्षम नहीं करेंगे। [[पॉलीफ़िल (प्रोग्रामिंग)|पॉलीफ़िल]], [[पॉलीफ़िल (प्रोग्रामिंग)|(प्रोग्रामिंग)]] जो सभी ब्राउज़रों में व्यवहार को संगत बनाने के लिए स्क्रिप्ट का उपयोग करते हैं, नए सीएसएस नियमों के समर्थन को जोड़ने के साथ-साथ विशेष ब्राउज़रों में बगों को ठीक करने के लिए उपयोग किए जा सकते हैं। चूंकि पॉलीफ़िल उन ब्राउज़रों में कार्यक्षमता जोड़ते या ठीक करते हैं जिनके पास यह नहीं है, वे अभिलक्षण क्वेरीज़ के सापेक्ष में एक अलग उद्देश्य की पूर्ति करते हैं, लेकिन उनके साथ संयोजन में उपयोग किया जा सकता है।
* सशर्त टिप्पणियाँ
* सशर्त टिप्पणियाँ


Line 155: Line 194:
* [https://www.rareprogrammer.com/css-comments सीएसएस        Comments] - How to add comments in सीएसएस         
* [https://www.rareprogrammer.com/css-comments सीएसएस        Comments] - How to add comments in सीएसएस         


{{DEFAULTSORT:Css Filter}}[[Category: व्यापक शैली पत्रक]]
{{DEFAULTSORT:Css Filter}}
 
 


[[Category: Machine Translated Page]]
[[Category:Articles with hatnote templates targeting a nonexistent page|Css Filter]]
[[Category:Created On 16/06/2023]]
[[Category:Created On 16/06/2023|Css Filter]]
[[Category:Lua-based templates|Css Filter]]
[[Category:Machine Translated Page|Css Filter]]
[[Category:Pages with script errors|Css Filter]]
[[Category:Templates Vigyan Ready|Css Filter]]
[[Category:Templates that add a tracking category|Css Filter]]
[[Category:Templates that generate short descriptions|Css Filter]]
[[Category:Templates using TemplateData|Css Filter]]
[[Category:व्यापक शैली पत्रक|Css Filter]]

Latest revision as of 11:14, 2 July 2023

सीएसएस हैक एक कंप्यूटर प्रोग्रामिंग तकनीक है जिसका उपयोग वेब ब्राउज़र संस्करण संख्या या क्षमताओं के आधार पर सीएसएस मार्कअप को छिपाने या दिखाने के लिए किया जाता है। ब्राउज़रों के पास सीएसएस व्यवहार के अलग-अलग व्याख्यान और 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 नियम ऐसे ब्राउज़र को लक्षित करने में मदद कर सकते हैं जिन्हें फॉलबैक कार्यक्षमता की आवश्यकता होती है, वे केवल विशेष ब्राउज़रों में बगों को संबोधित करेंगे या उन्नत कार्यक्षमता को सक्षम नहीं करेंगे। पॉलीफ़िल, (प्रोग्रामिंग) जो सभी ब्राउज़रों में व्यवहार को संगत बनाने के लिए स्क्रिप्ट का उपयोग करते हैं, नए सीएसएस नियमों के समर्थन को जोड़ने के साथ-साथ विशेष ब्राउज़रों में बगों को ठीक करने के लिए उपयोग किए जा सकते हैं। चूंकि पॉलीफ़िल उन ब्राउज़रों में कार्यक्षमता जोड़ते या ठीक करते हैं जिनके पास यह नहीं है, वे अभिलक्षण क्वेरीज़ के सापेक्ष में एक अलग उद्देश्य की पूर्ति करते हैं, लेकिन उनके साथ संयोजन में उपयोग किया जा सकता है।

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

संदर्भ

  1. Paul Irish (2009-04-15). "ब्राउज़र सीएसएस हैक". www.paulirish.com. Retrieved 8 June 2022.
  2. "विक्रेता उपसर्ग". Mozilla Developer Network. Retrieved 2016-10-12.


बाहरी संबंध