CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
CSS वेंडर प्रीफिक्स जनरेटर का उपयोग कैसे करें
- 1
अपना CSS पेस्ट करें
अपने CSS नियम, जैसे कोई flex या transition डिक्लेरेशन, कोड इनपुट बॉक्स में डालें।
- 2
प्रीफ़िक्स चुनें
जिन ब्राउज़रों को आपको सपोर्ट करना है उनके आधार पर तय करें कि कौन-से वेंडर प्रीफ़िक्स जोड़ने हैं, जैसे -webkit-, -moz-, -ms-, और -o-।
- 3
प्रीफ़िक्स्ड CSS जनरेट करें
अपने कोड का ऐसा संस्करण बनाने के लिए Generate Prefixes पर क्लिक करें जिसमें मिलते-जुलते प्रीफ़िक्स्ड प्रॉपर्टी जुड़ी हों।
- 4
नतीजा कॉपी करें
आउटपुट से प्रीफ़िक्स्ड CSS कॉपी करें और उसे वापस अपनी स्टाइलशीट में पेस्ट करें।
CSS वेंडर प्रीफ़िक्स की व्याख्या
वेंडर प्रीफ़िक्स असल में क्या होता है
वेंडर प्रीफ़िक्स एक छोटी स्ट्रिंग है जिसे किसी ब्राउज़र निर्माता ने किसी सुविधा को अंतिम रूप मिलने से पहले शिप करने के लिए किसी प्रॉपर्टी या मान के नाम के आगे लगाया। आप जिन चार से मिलेंगे वे हैं Chrome, Safari और आधुनिक Edge के पीछे के इंजन के लिए -webkit-, Firefox के लिए -moz-, पुराने Internet Explorer और मूल Edge के लिए -ms-, और पुराने Presto-आधारित Opera के लिए -o-। तो संक्रमण के वर्षों में आप transition-property और -webkit-transition-property दोनों लिख सकते थे, प्रीफ़िक्स्ड वाला उन ब्राउज़रों के लिए जिन्होंने उसे जल्दी शिप किया और सादा वाला उन ब्राउज़रों के लिए जो अंतिम मानक का अनुसरण करते हैं।
यांत्रिक रूप से कोई ब्राउज़र हर उस प्रॉपर्टी को अनदेखा कर देता है जिसे वह नहीं पहचानता, यही वह चीज़ है जो प्रीफ़िक्स को एक के ऊपर एक चढ़ाना सुरक्षित बनाती है। आप प्रीफ़िक्स्ड रूपों को पहले और मानक प्रॉपर्टी को आख़िर में सूचीबद्ध कर सकते हैं, और हर इंजन बस वही लाइन ले लेता है जिसे वह समझता है और बाकी छोड़ देता है।
प्रीफ़िक्स पहली बार में थे ही क्यों
प्रीफ़िक्स एक कठिन समस्या का व्यावहारिक उत्तर थे। जब ग्रेडिएंट, ट्रांसफ़ॉर्म, या flexbox जैसी कोई नई सुविधा अभी डिज़ाइन की जा रही होती थी, तो ब्राउज़र वेंडर डेवलपरों को प्रयोग करने देना चाहते थे, बिना ऐसी सिंटैक्स में बँध जाए जिसे विनिर्देश बदल सकता था। किसी सुविधा को प्रीफ़िक्स के पीछे शिप करना यह कहने का एक तरीका था कि यह प्रायोगिक है और बदल सकती है। अगर अंतिम मानक भिन्न निकलता, तो बिना-प्रीफ़िक्स वाली प्रॉपर्टी सही किया हुआ व्यवहार अपना सकती थी जबकि प्रीफ़िक्स्ड वाली पुराने को बनाए रखती, ताकि मौजूदा पेज चुपचाप टूट न जाएँ।
व्यवहार में यह व्यवस्था उल्टी पड़ गई। साइटें -webkit- सुविधाओं पर इतनी भारी निर्भर हो गईं कि दूसरे इंजनों को आख़िरकार वेब को सही ढंग से रेंडर करने के लिए कुछ -webkit- प्रीफ़िक्स्ड प्रॉपर्टी ख़ुद ही लागू करनी पड़ीं। वही परिणाम ठीक वजह है कि पूरे दृष्टिकोण को प्रायोगिक काम के लिए फ़ीचर फ़्लैग के पक्ष में बड़े पैमाने पर छोड़ दिया गया है।
प्रीफ़िक्स्ड और मानक को साथ कैसे लिखें
नियम सरल है और क्रम मायने रखता है: हर वह प्रीफ़िक्स्ड संस्करण लिखें जिसकी आपको ज़रूरत है, फिर मानक, बिना-प्रीफ़िक्स वाली प्रॉपर्टी आख़िर में लिखें। चूँकि जब सबको समझा जाता है तो बाद के डिक्लेरेशन जीतते हैं, मानक लाइन को सबसे नीचे रखने का मतलब है कि पूरी तरह आधुनिक ब्राउज़र अंतिम, सही व्यवहार इस्तेमाल करता है, जबकि कोई पुराना ब्राउज़र उस प्रीफ़िक्स्ड लाइन पर लौट जाता है जिसे वह समझता है। यह टूल उसी परिपाटी का अनुसरण करता है, आपके चुने हुए प्रीफ़िक्स्ड रूपों को मूल मानक डिक्लेरेशन के साथ निकालता है ताकि कैस्केड वैसे ही सुलझे जैसे आप उम्मीद करते हैं।
यही विचार कभी-कभी केवल प्रॉपर्टी नामों पर नहीं बल्कि मानों पर भी लागू होता है, क्योंकि कुछ सुविधाओं को मान की ओर भी प्रीफ़िक्स किया गया था। सुरक्षित आदत समान है: पुराना प्रीफ़िक्स्ड रूप दें, फिर उन ब्राउज़रों के लिए जो पकड़ चुके हैं मानक रूप को उसे ओवरराइड करने दें।
अधिकांश आधुनिक CSS को अब प्रीफ़िक्स की ज़रूरत नहीं
यही वह हिस्सा है जिसे आत्मसात करना ज़रूरी है: जिन प्रॉपर्टी को कभी प्रीफ़िक्स की ज़रूरत थी उनमें से अधिकांश को अब नहीं है। ट्रांज़िशन, ट्रांसफ़ॉर्म, ऐनिमेशन, box-shadow, border-radius, ग्रेडिएंट, और आधुनिक flexbox सिंटैक्स सभी मौजूदा ब्राउज़रों में बिना प्रीफ़िक्स के समर्थित हैं। इनमें आज -webkit-, -moz-, -ms- और -o- जोड़ना मृत कोड पैदा करता है जो आपकी स्टाइलशीट को फुला देता है, भविष्य के पाठकों को उलझा सकता है, और दुर्लभ मामलों में पुराने बग वाले व्यवहार को सक्रिय भी कर सकता है। अगर आपकी परियोजना केवल मौजूदा ब्राउज़रों को लक्ष्य करती है, तो बहुत संभावना है कि आपको किसी भी प्रीफ़िक्स की ज़रूरत नहीं।
यही वजह है कि एक विचारशील वर्कफ़्लो हर चीज़ को अपने आप प्रीफ़िक्स नहीं करता। यह केवल उतना ही प्रीफ़िक्स करता है जितना असली ब्राउज़र लक्ष्यों को चाहिए, जो आउटपुट को ऐसी लाइनों से भरा होने की बजाय जिन्हें कोई कभी निष्पादित नहीं करेगा, छरहरा और ईमानदार रखता है।
जहाँ प्रीफ़िक्स अब भी सचमुच मायने रखते हैं
मुट्ठी भर सुविधाएँ शिपिंग ब्राउज़रों में अब भी केवल-प्रीफ़िक्स या प्रीफ़िक्स-पहले बनी हुई हैं, और ये वही जगहें हैं जहाँ कोई प्रीफ़िक्स पुरानी रद्दी नहीं बल्कि एक मौजूदा ज़रूरत है। -webkit- प्रीफ़िक्स ख़ासकर अब भी उन चीज़ों के लिए दिखता है जैसे टेक्स्ट को एक तय लाइन-संख्या तक काटने वाली line-clamp तकनीक, कुछ backdrop और appearance व्यवहार, और मोबाइल Safari पर कुछ scrollbar व tap-highlight फेरबदल। इनके लिए, प्रीफ़िक्स छोड़ देने का मतलब है कि सुविधा बस काम नहीं करती, इसलिए ठीक यही वह समय है जब प्रीफ़िक्स की ओर हाथ बढ़ाना सही है।
अगर आप किसी ख़ास दर्शक वर्ग के लिए पुराने पर अब भी असली ब्राउज़र संस्करण सपोर्ट करते हैं, तो उन प्रॉपर्टी के लिए भी प्रीफ़िक्स फिर तस्वीर में लौट आते हैं जिन्हें हाल ही में मानकीकृत किया गया। निर्णायक सवाल कभी यह नहीं होता कि प्रॉपर्टी कैसी लगती है बल्कि यह कि आपके सपोर्ट मैट्रिक्स में असल में क्या है।
Autoprefixer और आधुनिक बिल्ड दृष्टिकोण
मौजूदा सर्वोत्तम परिपाटी यह है कि प्रीफ़िक्स को हाथ से लिखना बंद कर दें और किसी टूल को असली डेटा से उन्हें जोड़ने दें। Autoprefixer, किसी बिल्ड चरण के हिस्से के रूप में चलाया जाता है, आपकी परियोजना की घोषित ब्राउज़र सपोर्ट सूची पढ़ता है और अद्यतन अनुकूलता डेटा का इस्तेमाल करते हुए ठीक वही प्रीफ़िक्स डालता है जो उन ब्राउज़रों को चाहिए, न ज़्यादा न कम। आप साफ़-सुथरी मानक CSS लिखते हैं, और सही प्रीफ़िक्स बिल्ड समय पर अपने आप जेनरेट हो जाते हैं, फिर उसी पल हटा दिए जाते हैं जब आपकी सपोर्ट सूची को उनकी ज़रूरत नहीं रहती।
यह कन्वर्टर उस वर्कफ़्लो का हाथ से किया जाने वाला समकक्ष है, जो तब आदर्श है जब आप कोई बिल्ड पाइपलाइन नहीं चला रहे, जब आप किसी स्निपेट में जल्दी से कोई ख़ास प्रीफ़िक्स जोड़ना चाहते हैं, या जब आप सीख रहे हैं कि प्रीफ़िक्स्ड और मानक रूप आपस में कैसे जुड़ते हैं। किसी बड़े कोडबेस के लिए, Autoprefixer को जोड़ देने का मतलब है कि आप फिर कभी इसके बारे में नहीं सोचते।
प्रीफ़िक्स करने से पहले सपोर्ट जाँचें
कोई भी प्रीफ़िक्स जोड़ने से पहले, पुष्टि करें कि क्या वह असल में ज़रूरी है, caniuse जैसे किसी मौजूदा अनुकूलता संदर्भ को जाँचकर, जो प्रॉपर्टी-दर-प्रॉपर्टी दिखाता है कि कौन-से ब्राउज़र संस्करण मानक रूप को सपोर्ट करते हैं और कौन-से अब भी एक प्रीफ़िक्स की माँग करते हैं। उस पड़ताल को आपकी परियोजना द्वारा समर्थित ब्राउज़रों की एक स्पष्ट सूची के साथ जोड़ना प्रीफ़िक्सिंग को अंदाज़ेबाज़ी से बदलकर एक ऐसा निर्णय बना देता है जिसका आप बचाव कर सकें। बासी प्रीफ़िक्स की रखरखाव-लागत असली होती है, इसलिए जिन्हें आपको अब ज़रूरत नहीं उन्हें हटाना उतना ही मूल्यवान है जितना जिनकी ज़रूरत है उन्हें जोड़ना।
अक्सर पूछे जाने वाले प्रश्न
CSS वेंडर प्रीफ़िक्स किसलिए होते हैं?
यह टूल कौन-से प्रीफ़िक्स जोड़ सकता है?
क्या यह मेरी हर पेस्ट की गई प्रॉपर्टी पर प्रीफ़िक्स लगाता है?
क्या आज भी मुझे वेंडर प्रीफ़िक्स की ज़रूरत है?
क्या मेरा CSS कहीं भेजा जाता है?
संबंधित टूल्स
इन उपयोगी टूल्स के साथ आगे बढ़ें