CSS और CSS3 के बीच अंतर

व्यस्त रचनात्मक कार्यालय में डेस्क पर काम करने वाली महिला

आधुनिक कार्यालय में अपने कंप्यूटर पर काम करती एक महिला वेब डिज़ाइनर

छवि क्रेडिट: मंकीबिजनेस इमेजेज/आईस्टॉक/गेटी इमेजेज

मूल कैस्केडिंग स्टाइल शीट्स विनिर्देश, साथ ही साथ इसके हालिया CSS3 संशोधन, HTML वेब पेजों को बढ़ाने और प्रारूपित करने के लिए उपयोग की जाने वाली प्रौद्योगिकियां हैं। CSS को शुरुआत में वेब पेज की प्रेजेंटेशन लेयर को अधिक कुशल तरीके से संभालने के लिए डिज़ाइन किया गया था HTML के साथ स्वरूपण, जिसका कभी भी समकालीन वेब के जटिल निर्माण को संभालने का इरादा नहीं था। क्योंकि CSS2 CSS1 का एक सार्वभौमिक रूप से अपनाया गया विस्तार है, बिना किसी संख्या के CSS शब्द का अर्थ CSS2 को शामिल करना है। CSS3 की युक्ति अभी भी जुलाई 2014 तक विकास के अधीन है, इसलिए वेब डेवलपर्स को यह विचार करने की आवश्यकता है कि सुविधा समर्थन ब्राउज़रों के बीच भिन्न होता है।

CSS3 पीछे की ओर CSS के साथ संगत है

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

दिन का वीडियो

CSS3 गोल कोनों और ग्रेडिएंट जोड़ता है

CSS3 से पहले, वेब डेवलपर्स को संरचनात्मक सीमाओं और पृष्ठभूमि छवि ग्रेडिएंट्स के लिए गोल कोनों जैसी चीज़ों को जोड़ने के लिए छवि फ़ाइलों को डिज़ाइन करने की आवश्यकता होती है; CSS3 में तुलनीय विशेषताएं शामिल हैं जिन्हें कोड की कुछ पंक्तियों के साथ जोड़ा जा सकता है। CSS में, एक वेब डेवलपर को एक बॉर्डर या ग्रेडिएंट डिज़ाइन करना होता है, इसे इमेज सर्वर पर अपलोड करना होता है, इमेज को पेज पर रखना होता है और बॉर्डर को सही ढंग से पोजिशन करने के लिए CSS का उपयोग करना होता है। CSS3 में, वेब डेवलपर ".roundBorder{border-radius: 10px;}" जैसे कोड के साथ कुछ ऐसा ही कर सकता है। बैकग्राउंड ग्रेडिएंट थोड़े अधिक जटिल होते हैं और विभिन्न ब्राउज़रों के लिए अलग-अलग कोड की आवश्यकता होती है। उदाहरण के लिए, क्रोम और IE के लिए एक सफेद से काले रंग का ग्रेडिएंट ".gradBG{background: लाइनर-ग्रेडिएंट (सफेद, काला);}" जैसे कोड का उपयोग करता है।

CSS3 एनिमेशन सुविधाएँ और टेक्स्ट प्रभाव जोड़ता है

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

CSS3 टेक्स्ट कॉलम को परिभाषित करता है

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

श्रेणियाँ

हाल का

पीसी कीबोर्ड पर संगीत नोट्स कैसे बनाएं

पीसी कीबोर्ड पर संगीत नोट्स कैसे बनाएं

विंडोज़ सैकड़ों प्रतीकों का उपयोग कर सकता है जो...

वर्ड में गटर मार्जिन क्या है?

वर्ड में गटर मार्जिन क्या है?

गटर मार्जिन सुनिश्चित करता है कि टेक्स्ट बाध्य...

GIMP में किनारों को कैसे पंख दें

GIMP में किनारों को कैसे पंख दें

ग्राफिक डिजाइनर GiMP सॉफ्टवेयर के साथ पेशेवर प...