सीएसएस 3 बनाम सीएसएस – वे अलग कैसे हैं? (जानकारी ग्राफ)

सीएसएस 3 बनाम सीएसएस

कैस्केडिंग स्टाइल शीट्स या सीएसएस वेब डिज़ाइन का एक प्रमुख तत्व है। एक वेब डेवलपर या डिजाइनर के रूप में, आपको सीएसएस की गहरी समझ होनी चाहिए, खासकर सीएसएस 3 बनाम सीएसएस के बीच का अंतर।

यदि आपने वेब विकास या वेब डिज़ाइन के बारे में पढ़ा है तो आपने सीएसएस 3 शब्द को सुना या सुना होगा। यदि आपने कभी सोचा है कि सीएसएस 3 बनाम सीएसएस के बीच अलग-अलग क्या हो सकता है, तो सीएसएस 3 बनाम सीएसएस आपके सभी संदेह बाकी के लिए रखे जाएंगे: वे दोनों एक जैसे हैं।

यह सही है:  सीएसएस 3 बनाम सीएसएस  एक दूसरे से एचटीएमएल  और एचटीएमएल5 के रूप में अलग हैं । सीएसएस 3 बस सीएसएस का नवीनतम पुनरावृत्ति है। जो लोग अभी कोडिंग सीएसएस के बारे में बात करते हैं वे वास्तव में केवल सीएसएस 3 का जिक्र कर रहे हैं।

एचटीएमएल 5 और सीएसएस 3 दोनों आम तौर पर चर्चा शब्द बन जाते हैं, उनके वास्तविक प्रौद्योगिकियों से परे अर्थों के साथ। वे स्वामित्व सॉफ्टवेयर का उपयोग करने के बजाय वेब विकास में कुछ मूल मानकों के अनुपालन का प्रतीक हैं। अधिकांश भाग के लिए, इन चर्चा शब्द के आसपास प्रचार पहले से ही मर गया है। ज्यादातर कंपनियां, यहां तक ​​कि जो लोग घर में सब कुछ रखकर कसम खाता है, वे इस बात से सहमत होंगे कि इन मूल मानकों से चिपके रहने से जीवन हर किसी के लिए आसान हो जाता है।

अब, यह काफी समय से रहा है क्योंकि सीएसएस 3 को लॉन्च किया गया है और एक और सभी द्वारा स्वीकार किया गया है। इसने उद्योग को बहुत सी महान चीजें लाईं और आम तौर पर वेब विकास के लिए काफी बड़ा कदम बताया। पिछले संस्करण, सीएसएस 2, 1 99 8 में सभी तरह से लॉन्च किया गया था। यह लगभग 20 साल पहले है। लॉन्च के बाद इसे प्राप्त एकमात्र संशोधन 2011 में किया गया था, जिसे सीएसएस 2.1 कहा जाता था। संशोधन के साथ भी, अधिकांश विशेषज्ञों ने पहले से ही यह कहना शुरू कर दिया था कि सीएसएस 3 अपरिहार्य है। सीएसएस 3 कई सुविधाओं और क्षमताओं के साथ आया था जो तब तक पूरी तरह से आवश्यक हो गए थे।

आप सीएसएस 3 बनाम सीएसएस के बारे में जो नहीं जानते हैं वह यह है कि पिछले संस्करण को सबमिट करने के एक साल बाद ही विकास शुरू हुआ। इसका मतलब है कि डब्ल्यू 3 सी 1 999 से बेहतर संस्करण पर काम कर रहा था। सीएसएस 3 के पहले स्थिर संस्करण को रिलीज़ करने में 12 साल से अधिक समय लगा।

सीएसएस 3 बनाम सीएसएस के बीच बहुत अंतर हैं (जिसे हम जल्द ही प्राप्त करेंगे)। लेकिन तथ्य यह है कि वेब ब्राउजर पहले से रिलीज होने तक सीएसएस 3 के अतिरिक्त के लिए तैयार थे। नतीजतन, वे नई रिलीज के लिए जल्दी से अनुकूलित किया। प्रत्येक प्रमुख वेब ब्राउज़र अब सीएसएस 3 का समर्थन करता है, यहां तक ​​कि इंटरनेट एक्सप्लोरर भी!

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

सीएसएस 3 बनाम सीएसएस इन्फोग्राफिक्स

सीएसएस 3 बनाम सीएसएस मतभेद परिभाषित

अब जब आप सीएसएस 3 के पीछे पृष्ठभूमि के बारे में कुछ जानते हैं, तो चलिए इसे बदलकर देखें। शायद सीएसएस 3 और पिछली रिलीज के बीच सबसे बड़ा अंतर यह बदल गया है कि मॉड्यूल अलगाव है। सीएसएस 2 में, सब कुछ एक बड़ा विनिर्देश था जो विभिन्न विशेषताओं को परिभाषित करता था। हालांकि, सीएसएस 3 ने मॉड्यूल नामक कई दस्तावेजों को लाकर इसे बदल दिया। प्रत्येक मॉड्यूल की अपनी नई क्षमताएं होती हैं जो पिछले स्थिर सीएसएस रिलीज की संगतता को प्रभावित नहीं करती हैं।

मीडिया के प्रश्नों

बहुत सारे मॉड्यूल उपलब्ध हैं, लेकिन केवल चार को डब्ल्यू 3 सी द्वारा औपचारिक सिफारिशों के रूप में प्रकाशित किया गया है । ये बड़े चार मॉड्यूल निम्नानुसार हैं:

1. रंग, प्रकाशित 2011
2. चयनकर्ता स्तर 3, प्रकाशित 2011
3. नामस्थान, प्रकाशित 201
4. मीडिया प्रश्न, प्रकाशित 2012

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

मीडिया प्रश्नों को समझने और जोड़ने के लिए भी बहुत आसान है। एक बार जब आप उन्हें कुछ बार इस्तेमाल करते हैं, तो आप बाकी के बारे में काफी कुछ समझ सकते हैं। कोड की कुछ उदाहरण पंक्तियां यहां दी गई हैं:

@media स्क्रीन और (अधिकतम-चौड़ाई: 600 पीएक्स) {

पृष्ठभूमि: # एफएफएफ;

}

काफी सरल लगता है, है ना? कोड की इन पंक्तियों के साथ, आप अधिकतम 600 पिक्सल चौड़ाई वाली स्क्रीन के लिए स्टाइल सक्षम कर सकते हैं। इसका मतलब है कि अधिकतम 600 पिक्सेल चौड़ाई वाली सभी स्क्रीन एक सफेद पृष्ठभूमि दिखाएंगी। अधिकतम चौड़ाई केवल उन स्थितियों में से एक है जिन्हें आप सीएसएस 3 पर स्टाइल शीट पर लागू कर सकते हैं। दूसरा एक अधिकतम डिवाइस चौड़ाई है। यह स्क्रीन रेज़ोल्यूशन है और देखने का क्षेत्र नहीं है। इसके अलावा, अधिकतम मूल्य के बजाय न्यूनतम मूल्य कहा जा सकता है; बस ‘अधिकतम’ के बजाय ‘मिनट’ का उपयोग करें। आप दोनों को भी नीचे जोड़ सकते हैं:

@media स्क्रीन और (न्यूनतम-चौड़ाई: 600 पीएक्स) और (अधिकतम-चौड़ाई: 900 पीएक्स) {

पृष्ठभूमि: # एफएफएफ;

}

यहां, स्टाइल केवल 600-900 पिक्सल की देखने वाली चौड़ाई वाली स्क्रीन के लिए लागू होती है। सीएसएस 3 ऐप्पल आईपैड और आईफोन जैसे लोकप्रिय मोबाइल उपकरणों के लिए कुछ प्री-डिफ़ाइंड स्टाइल शीट्स के साथ आता है। ये उनमे से कुछ है:

      

             <link href=”iphone4.css” rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text/css” />

<link href=”portrait.css” rel=”stylesheet” media=”all and (orientation:portrait)” />

<link href=”landscape.css” rel=”stylesheet” media=”all and (orientation:landscape)” />

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

घुमावदार सीमाएं

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

-मोज़-सीमा-त्रिज्या: 5 पीएक्स;

-वेबिट-सीमा-त्रिज्या: 5 पीएक्स;

सीमा: 2 पीएक्स ठोस # 897048;

इस प्रकार, सीएसएस 3 वेब डेवलपर और डिजाइनर के लिए जीवन को बहुत आसान बनाता है। रिलीज भी ढ़ाल के साथ आया था, जो पिछले रिलीज में आश्चर्यजनक रूप से अनुपलब्ध था।

सीमा छवियों, पाठ छाया

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

टेक्स्ट–छाया: 2 पीएक्स 2 पीएक्स 2 पीएक्स # डीडीसीसीबी 5;

कॉलम

सीएसएस 3 ने सामग्री को कॉलम जोड़ने का तरीका भी सरल बनाया। आपको बस इतना करना है कि कोड की चार पंक्तियां जोड़ें:

1. स्तंभ गिनती
2. स्तंभ की चौड़ाई
3. स्तंभ की खाई
4. स्तंभ-शासन

एकाधिक पृष्ठभूमि

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

.multiplebackgrounds {

height: 100px;

width: 200px;

padding: 20px;

background: url(top.gif) top right no-repeat,

url(bottom.gif) top left repeat-y,

url(middle.gif) bottom repeat-z;

}

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

उस समय के दौरान विक्रेता उपसर्ग का उपयोग तब किया जाता था जब सीएसएस 3 ने अभी जारी किया था। उन्होंने ब्राउज़र को सीएसएस कोड की व्याख्या करने में मदद की। यदि आपका वेब ब्राउज़र कोड को पढ़ने में सक्षम नहीं है, तो उनका उपयोग इस दिन किया जाता है। प्रमुख ब्राउज़रों के लिए विक्रेता उपसर्ग यहां दिए गए हैं:

• –मोज़–फ़ायरफ़ॉक्स
• -webkit-: ऐप्पल सफारी और गूगल क्रोम जैसे वेबकिट ब्राउज़र
• –ओ–: ओपेरा
• –एमएस–: इंटरनेट एक्सप्लोरर

ओपेरा का उपसर्ग भी अनावश्यक हो गया है क्योंकि कंपनी ने अपने मोबाइल और डेस्कटॉप ब्राउजर को अपने प्रेस्टो रेंडरिंग इंजन से वेबकिट मंच पर स्विच किया है। यद्यपि विक्रेता उपसर्ग का उपयोग कुछ हद तक किया जा रहा है, लेकिन इस बिंदु पर यह ज्यादातर गायब हो गया है।

छद्म वर्ग जोड़ा गया

सीएसएस 3 बनाम सीएसएस के अतिरिक्त के साथ, हमें कई अतिरिक्त छद्म-वर्ग भी मिलते हैं, जिनमें संरचनात्मक तत्व शामिल हैं, उनके दस्तावेज़ स्थिति और अन्य विभिन्न तत्वों के संबंध में तत्वों को लक्षित करने के लिए। ये उनमे से कुछ है:

• : रूट दस्तावेज़ के मूल तत्व को लक्षित करता है
• : लक्ष्य (ओं) लक्ष्य तत्वों में निर्दिष्ट चयनकर्ताओं द्वारा मेल नहीं खाते हैं
• : पहला बच्चा आइटम के प्रकार के बावजूद कंटेनर में पहले बच्चे को लक्षित करता है
• : पहले प्रकार के प्रकार माता-पिता के भीतर पहले निर्दिष्ट प्रकार के तत्व को लक्षित करता है
• : एन टी एच बच्चे (एन) माता-पिता में उनकी स्थिति के संबंध में बाल तत्वों को लक्षित करने के लिए (एन) के भीतर संख्यात्मक मानों का उपयोग करता है।उदाहरण के लिए, आप ब्लॉग टिप्पणियों के लिए वैकल्पिक पृष्ठभूमि रंग जोड़ने के लिए इसका उपयोग कर सकते हैं
• : रिक्त लक्ष्य तत्व जिनके पास टेक्स्ट या बच्चे नहीं हैं, जैसे खाली तत्व जैसे <p> </ p>
• : केवल-बच्चे एक दस्तावेज़ पेड़ में तत्वों को लक्षित करता है जो माता-पिता के भीतर एकमात्र बाल तत्व है

नए सीएसएस 3 चयनकर्ताओं

सीएसएस 3 नए चयनकर्ताओं, एक नए संयोजन और छद्म तत्वों के माध्यम से सीएसएस नियमों को लिखने के कई तरीकों की पेशकश करता है: यहां तीन नए विशेषता चयनकर्ता हैं:

• सटीक मिलान के लिए, तत्व [foo ^ = “bar”]
• ‘बार’ से शुरू होने वाली foo नामक विशेषता वाले तत्व से मेल खाने के लिए, तत्व [foo $ = “bar”]
• ‘बार’ के साथ समाप्त होने वाली फू नामक विशेषता वाले तत्व से मेल खाने के लिए, तत्व [foo * = “bar”]

सीएसएस 3 कई नए छद्म वर्गों के साथ आता है, जिनमें से कुछ पर चर्चा की गई है। यहां कुछ और हैं:

• : nth-आखिरी बच्चा (एन) पिछले एक से सटीक बाल तत्वों से मेल खाता है
• : nth-के प्रकार (एन) दस्तावेज पेड़ में उनके सामने समान नाम रखने वाले तत्वों को जोड़ता है
• : nth-पिछले के- प्रकार (एन) नीचे से समान नाम वाले भाई तत्वों से मेल खाता है
• : अंतिम प्रकार के प्रकार माता-पिता के भीतर अंतिम निर्दिष्ट प्रकार के तत्व को लक्षित करता है
• : केवल प्रकार का लक्ष्य उस तत्व को लक्षित करता है जिसमें से यह एकमात्र प्रकार है
• : लक्षित लक्ष्य तत्व जो संदर्भित यूआरआई द्वारा लक्षित हैं
• : सक्षम होने पर सक्षम तत्व से मेल खाता है
• : विकलांग होने पर अक्षम तत्व से मेल खाता है
• : जब चेकबॉक्स या रेडियो बटन के माध्यम से चेक किया जाता है तो तत्व को चेक किया जाता है

एक नया संयोजक

सीएसएस 3 भी एक ब्रांड नए कॉमबिनेटर के साथ आता है: तत्व ए ~ तत्व बी

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

नई बॉक्स शैली गुण

सीएसएस 3 में पिछले रिलीज के समान बॉक्स मॉडल है, लेकिन कुछ नई शैली गुणों के साथ जो आपको अपने बक्से की सीमाओं और पृष्ठभूमि की शैली में मदद करते हैं। सीएसएस 3 में नई पृष्ठभूमि गुण हैं:

• पृष्ठभूमि क्लिप

इस संपत्ति का उपयोग पृष्ठभूमि छवि को क्लिप करने के तरीके को परिभाषित करने के लिए किया जाता है। डिफ़ॉल्ट क्लिपिंग आयाम सीमा बॉक्स है, लेकिन आप इसे सामग्री बॉक्स या पैडिंग बॉक्स में बदल सकते हैं।

• पृष्ठभूमि मूल के

यह विशेष संपत्ति यह निर्धारित करने के लिए प्रयोग की जाती है कि पृष्ठभूमि को सीमा बॉक्स, सामग्री बॉक्स या पैडिंग बॉक्स में रखा जाना चाहिए या नहीं।

• पृष्ठभूमि आकार

यह संपत्ति डेवलपर को पृष्ठभूमि छवि आकार को इंगित करने और पृष्ठ को फ़िट करने के लिए छोटी छवियों को फैलाने में सक्षम बनाती है।

सीएसएस 3 ने मौजूदा पृष्ठभूमि शैली गुणों में से कुछ को भी बदल दिया। परिवर्तनों पर एक नज़र डालें:

• पृष्ठभूमि दोहराएँ

यह संपत्ति अब दो नए मूल्यों के साथ आता है: गोल और स्थान। गोल बॉक्स में कई बार टाइल करने के लिए छवि को पुन: सहेजता है। अंतरिक्ष क्लिपिंग के बिना बॉक्स में टाइल वाली छवि को समान रूप से स्थानांतरित करता है।

• पृष्ठभूमि संलग्न

संपत्ति संख्या में ‘स्थानीय’ मान शामिल है ताकि तत्व में स्क्रॉल बार होने पर तत्व सामग्री के साथ पृष्ठभूमि स्क्रॉल हो।

नई सीमा संपत्तियों

सीएसएस 3 सीमाओं को डबल, ठोस, धराशायी या यहां तक ​​कि एक छवि के रूप में स्टाइल करने में सक्षम बनाता है। सीमा छवियां एक दिलचस्प जोड़ हैं: वे आपको सभी चार सीमाओं की एक छवि बनाने देते हैं और फिर सीमाओं पर छवि को लागू करने के लिए सीएसएस को बताते हैं। सीएसएस 3 के साथ आने वाली कुछ नई सीमा संपत्तियां यहां दी गई हैं:

• सीमा–त्रिज्या, सीमा–तल–दाएं–त्रिज्या, सीमा–शीर्ष–दाएं–त्रिज्या, सीमा–शीर्ष–बाएं–त्रिज्या, सीमा–तल–बाएं–त्रिज्या आपको गोलाकार सीमाएं बनाने देता है
• सीमा–छवि–स्रोत आपको पूर्व परिभाषित सीमा शैलियों का उपयोग करने के बजाय एक छवि स्रोत फ़ाइल निर्दिष्ट करने देता है
• सीमा–छवि–टुकड़ा सीमा छवियों के किनारों से अंदरूनी ऑफसेट का प्रतिनिधित्व करता है
• सीमा–छवि–चौड़ाई आपकी सीमा छवि के लिए चौड़ाई मान को परिभाषित करती है
• सीमा–छवि–आउटसेट उस सीमा बॉक्स से परे राशि निर्दिष्ट करता है जिस पर छवि विस्तारित होती है
• सीमा–छवि–खिंचाव सीमा छवि के बीच और किनारे के हिस्सों की टाइलिंग या स्केलिंग को परिभाषित करता है

निष्कर्ष – सीएसएस 3 बनाम सीएसएस

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