CSS विक्रेता या ब्राउज़र उपसर्ग क्या हैं?

click fraud protection

CSS विक्रेता उपसर्ग, जिसे कभी-कभी or. के रूप में भी जाना जाता है सीएसएस ब्राउज़र उपसर्ग, ब्राउज़र निर्माताओं के लिए समर्थन जोड़ने का एक तरीका है नई सीएसएस विशेषताएं इससे पहले कि वे सुविधाएँ सभी ब्राउज़रों में पूरी तरह से समर्थित हों। यह एक प्रकार की परीक्षण और प्रयोग अवधि के दौरान किया जा सकता है जहां ब्राउज़र निर्माता यह निर्धारित कर रहा है कि इन नई सीएसएस सुविधाओं को कैसे लागू किया जाएगा। ये उपसर्ग. के उदय के साथ बहुत लोकप्रिय हो गए CSS3 कुछ साल पहले।

फ़ायरफ़ॉक्स वेब ब्राउज़र web
KTSDESIGN/साइंस फोटो लाइब्रेरी/Getty Images

विक्रेता उपसर्गों की उत्पत्ति

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

instagram viewer

सामान्य उपसर्ग

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

आप जिन सीएसएस ब्राउज़र उपसर्गों का उपयोग कर सकते हैं (जिनमें से प्रत्येक एक अलग ब्राउज़र के लिए विशिष्ट है) हैं:

  • एंड्रॉयड:
    -वेबकिट-
  • क्रोम:
    -वेबकिट-
  • फ़ायरफ़ॉक्स:
    -मोज-
  • इंटरनेट एक्स्प्लोरर:
    -एमएस-
  • आईओएस:
    -वेबकिट-
  • ओपेरा:
    -ओ-
  • सफारी:
    -वेबकिट-

उपसर्ग जोड़ना

ज्यादातर मामलों में, बिल्कुल नई सीएसएस शैली की संपत्ति का उपयोग करने के लिए, आप मानक सीएसएस संपत्ति लेते हैं और प्रत्येक ब्राउज़र के लिए उपसर्ग जोड़ते हैं। प्रीफ़िक्स्ड संस्करण हमेशा पहले आएंगे (किसी भी क्रम में आप पसंद करते हैं) जबकि सामान्य सीएसएस संपत्ति अंतिम होगी। उदाहरण के लिए, यदि आप अपने दस्तावेज़ में CSS3 संक्रमण जोड़ना चाहते हैं, तो आप नीचे दिखाए गए अनुसार ट्रांज़िशन प्रॉपर्टी का उपयोग करेंगे:

-वेबकिट-संक्रमण: सभी 4s आसानी;
-मोज़-संक्रमण: सभी 4s आसानी;
-एमएस-संक्रमण: सभी 4s आसानी;
-ओ-संक्रमण: सभी 4s आसानी;
संक्रमण: सभी 4s आसानी;

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

साथ ही, Firefox मानक मानों की तुलना में भिन्न मानों का उपयोग करता है।

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

विक्रेता उपसर्ग एक हैक नहीं हैं

जब विक्रेता उपसर्ग पहली बार पेश किए गए थे, तो कई वेब पेशेवर सोचते थे कि क्या वे एक हैक थे या एक विभिन्न ब्राउज़रों का समर्थन करने के लिए वेबसाइट के कोड को फोर्क करने के काले दिनों में वापस जाएं (याद रखें कि "यह साइट IE. में सबसे अच्छी तरह से देखी जाती है" संदेश)। हालाँकि, CSS विक्रेता उपसर्ग हैक नहीं हैं, और आपको अपने काम में उनका उपयोग करने के बारे में कोई आपत्ति नहीं होनी चाहिए।

एक सीएसएस हैक किसी अन्य तत्व या संपत्ति के कार्यान्वयन में खामियों का फायदा उठाता है ताकि दूसरी संपत्ति सही ढंग से काम कर सके। उदाहरण के लिए, बॉक्स मॉडल हैक ने वॉयस-फ़ैमिली के पार्सिंग में या ब्राउज़र बैकस्लैश को पार्स करने के तरीके में खामियों का फायदा उठाया। लेकिन इन हैक्स का उपयोग इस अंतर की समस्या को ठीक करने के लिए किया गया था कि कैसे Internet Explorer 5.5 ने बॉक्स मॉडल को संभाला और कैसे नेटस्केप इसकी व्याख्या की, और इसका आवाज परिवार शैली से कोई लेना-देना नहीं है। शुक्र है कि ये दो पुराने ब्राउज़र हैं जिन्हें हमें इन दिनों खुद से चिंतित होने की आवश्यकता नहीं है।

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

जानना चाहते हैं कि किसी खास फीचर के लिए ब्राउजर सपोर्ट क्या है? वेबसाइट CanIUse.com यह जानकारी एकत्र करने और आपको यह बताने के लिए एक अद्भुत संसाधन है कि वर्तमान में कौन से ब्राउज़र और उन ब्राउज़र के कौन से संस्करण एक सुविधा का समर्थन करते हैं।

विक्रेता उपसर्ग कष्टप्रद लेकिन अस्थायी हैं but

हां, सभी ब्राउज़रों में काम करने के लिए गुणों को 2-5 बार लिखना कष्टप्रद और दोहराव वाला लग सकता है, लेकिन यह एक अस्थायी स्थिति है। उदाहरण के लिए, कुछ साल पहले, एक बॉक्स पर एक गोल कोना सेट करने के लिए आपको लिखना था:

-मोज़-बॉर्डर-त्रिज्या: 10px 5px;
-वेबकिट-बॉर्डर-टॉप-लेफ्ट-रेडियस: 10px;
-वेबकिट-बॉर्डर-टॉप-राइट-रेडियस: 5px;
-वेबकिट-बॉर्डर-बॉटम-राइट-रेडियस: 10px;
-वेबकिट-बॉर्डर-बॉटम-लेफ्ट-रेडियस: 5px;
सीमा-त्रिज्या: 10px 5px;

लेकिन अब जब ब्राउज़र इस सुविधा का पूरी तरह से समर्थन करने के लिए आ गए हैं, तो आपको वास्तव में केवल मानकीकृत संस्करण की आवश्यकता है:

सीमा-त्रिज्या: 10px 5px; 

क्रोम ने संस्करण 5.0 के बाद से CSS3 की संपत्ति का समर्थन किया है, फ़ायरफ़ॉक्स ने इसे संस्करण 4.0 में जोड़ा है, सफारी ने इसे 5.0 में जोड़ा है, ओपेरा ने 10.5 में, आईओएस में 4.0, और एंड्रॉइड 2.1 में। यहां तक ​​​​कि इंटरनेट एक्सप्लोरर 9 भी बिना किसी उपसर्ग के इसका समर्थन करता है (और आईई 8 और निचला इसके साथ या बिना इसका समर्थन नहीं करता है उपसर्ग)।

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

instagram story viewer