CSS2 और CSS3 के बीच का अंतर

CSS2 और. के बीच सबसे बड़ा अंतर CSS3 यह है कि CSS3 को विभिन्न वर्गों में विभाजित किया गया है, जिसे कहा जाता है मॉड्यूल. इनमें से प्रत्येक मॉड्यूल अनुशंसा प्रक्रिया के विभिन्न चरणों में W3C के माध्यम से अपना रास्ता बना रहा है। इस प्रक्रिया ने CSS3 के विभिन्न टुकड़ों को विभिन्न निर्माताओं द्वारा ब्राउज़र में स्वीकार और कार्यान्वित करना बहुत आसान बना दिया है।

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

नए CSS3 चयनकर्ता

CSS3 नए CSS चयनकर्ताओं के साथ-साथ एक नए संयोजक और कुछ नए छद्म तत्वों के साथ CSS नियम लिखने के कई नए तरीके प्रदान करता है।

तीन नए विशेषता चयनकर्ता हैं:

• एट्रिब्यूट की शुरुआत से बिल्कुल मेल खाता है:

  तत्व [फू ^ = "बार"]

  तत्व में foo नामक एक विशेषता होती है जो "बार" से शुरू होती है उदा।
instagram viewer
• एट्रिब्यूट एंडिंग मैच बिल्कुल:

  तत्व [फू $ = "बार"]

  तत्व में foo नामक एक विशेषता होती है जो "बार" के साथ समाप्त होती है उदा।
• विशेषता में मैच शामिल है:

  तत्व [फू * = "बार"]

  तत्व में एक है गुण बुला हुआ फू जिसमें स्ट्रिंग "बार" है।

16 नए छद्म वर्ग पेश किए गए हैं:

• :रूट
  • दस्तावेज़ का मूल तत्व।
• : nवां बच्चा (एन)
  • इसका उपयोग सटीक बाल तत्वों से मिलान करने के लिए करें या वैकल्पिक मिलान प्राप्त करने के लिए चर का उपयोग करें।
• :nth-last-child (n)
  • पिछले एक से गिनती करते हुए सटीक बाल तत्वों का मिलान करें।
• :nth-of-type (n)
  • दस्तावेज़ ट्री में इसके पहले समान नाम वाले सिबलिंग तत्वों का मिलान करें।
• :nth-अंतिम-प्रकार (n)
  • नीचे से ऊपर की ओर गिनते हुए समान नाम वाले सहोदर तत्वों का मिलान करें।
• :आखरी बच्चा
  • अंतिम मिलान करें बाल तत्व माता-पिता की।
• :फर्स्ट-ऑफ़-टाइप
  • उस प्रकार के पहले सहोदर तत्व का मिलान करें।
• :अंतिम प्रकारof
  • उस प्रकार के अंतिम सहोदर तत्व का मिलान करें।
• :केवल बच्चे
  • उस तत्व का मिलान करें जो अपने माता-पिता की एकमात्र संतान है।
• :केवल-के-प्रकार
  • उस तत्व का मिलान करें जो अपने प्रकार का केवल एक है।
• :खाली
  • उस तत्व का मिलान करें जिसमें कोई बच्चा नहीं है (पाठ नोड्स सहित)।
• :लक्ष्य
  • उस तत्व का मिलान करें जो संदर्भित यूआरआई का लक्ष्य है।
• :सक्षम
  • सक्षम होने पर तत्व का मिलान करें।
• विकलांग
  • अक्षम होने पर तत्व का मिलान करें।
• :चेक किया गया
  • चेक किए जाने पर तत्व का मिलान करें (रेडियो बटन या चेकबॉक्स)।
• :नहीं
  • मिलान करें जब तत्व सरल से मेल नहीं खाता चयनकर्ताओं.

एक नया संयोजक है:

• तत्वए ~ तत्वबी
  • मैच जब एलिमेंट बी एलिमेंट ए के बाद कहीं आता है, जरूरी नहीं कि तुरंत।

नई गुण

CSS3 ने कई नए CSS गुण भी पेश किए। इनमें से कई गुण दृश्य शैली बनाते हैं जो संभवतः एक ग्राफिक्स प्रोग्राम के साथ अधिक संबद्ध होंगे जैसे more फोटोशॉप. इनमें से कुछ, जैसे सीमा-त्रिज्या या बॉक्स-छाया, CSS3 की शुरुआत के बाद से आसपास रहे हैं। अन्य, जैसे flexbox या यहां तक ​​कि सीएसएस ग्रिड, नई शैलियाँ हैं जिन्हें अभी भी अक्सर CSS3 परिवर्धन माना जाता है।

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

एकाधिक पृष्ठभूमि छवियां

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

नई पृष्ठभूमि शैली गुण

CSS3 में कुछ नई पृष्ठभूमि गुण भी हैं:

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

मौजूदा पृष्ठभूमि शैली गुणों में परिवर्तन

मौजूदा पृष्ठभूमि शैली गुणों में भी कुछ परिवर्तन हैं:

• पृष्ठभूमि दोहराएँ
  • इस संपत्ति के लिए दो नए मूल्य हैं - अंतरिक्ष तथा गोल. स्पेस टाइल वाली छवि को बिना क्लिप किए बॉक्स के भीतर समान रूप से स्थान देता है। गोल पृष्ठभूमि छवि को फिर से आकार देता है ताकि वह बॉक्स में कई बार टाइल कर सके।
• पृष्ठभूमि संलग्न
  • एक नया मान "स्थानीय" जोड़ा जाता है ताकि उस तत्व में स्क्रॉल बार होने पर पृष्ठभूमि तत्व की सामग्री के साथ स्क्रॉल हो जाए।
• पृष्ठभूमि
  • पृष्ठभूमि आशुलिपि गुण आकार और मूल गुणों में जोड़ता है।

CSS3 सीमा गुण

CSS3 में, बॉर्डर वे शैलियाँ हो सकती हैं जिनका हम उपयोग करते हैं (ठोस, डबल, डैश्ड, आदि) या वे एक छवि हो सकती हैं। साथ ही, CSS3 गोल कोनों का समर्थन करता है। बॉर्डर इमेज दिलचस्प हैं क्योंकि आप सभी चार बॉर्डर की इमेज बनाते हैं और फिर CSS को बताते हैं कि उस इमेज को अपनी बॉर्डर पर कैसे लागू किया जाए।

नई सीमा शैली गुण

CSS3 में कुछ नई सीमा गुण हैं:

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

सीमाओं और पृष्ठभूमि से संबंधित अतिरिक्त CSS3 गुण

जब कोई बॉक्स पेज ब्रेक, कॉलम ब्रेक, या लाइन ब्रेक (इनलाइन तत्वों के लिए) पर टूट जाता है, तो बॉक्स-सजावट-ब्रेक संपत्ति परिभाषित करती है कि कैसे नए बक्से सीमा और पैडिंग के साथ लपेटे जाते हैं। इस संपत्ति का उपयोग करके पृष्ठभूमि कई टूटे हुए बक्से में विभाजित होती है।

एक नया डब्बे की छाया संपत्ति बॉक्स तत्वों में छाया जोड़ती है।

CSS3 के साथ, अब आप आसानी से बिना टेबल या जटिल के कई स्तंभों वाला एक वेबपेज सेट कर सकते हैं डिव टैग संरचनाएं। आप बस ब्राउज़र को बताएं कि शरीर के तत्व में कितने कॉलम होने चाहिए और वे कितने चौड़े होने चाहिए। साथ ही आप कॉलम की ऊंचाई तक फैले बॉर्डर (नियम) और पृष्ठभूमि रंग जोड़ सकते हैं, और आपका टेक्स्ट सभी कॉलमों में अपने आप प्रवाहित हो जाएगा।

कॉलम की संख्या और चौड़ाई को परिभाषित करें

तीन नए हैं गुण जो आपको अपने कॉलम की संख्या और चौड़ाई को परिभाषित करने की अनुमति देता है:

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

CSS3 कॉलम अंतराल और नियम

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

• कॉलम-गैप
  • स्तंभों के बीच अंतराल की चौड़ाई को परिभाषित करता है।
• स्तंभ-नियम-रंग
  • नियम के रंग को परिभाषित करता है।
• स्तंभ-नियम-शैली
  • नियम की शैली को परिभाषित करता है (ठोस, बिंदीदार, दोहरा, आदि)।
• स्तंभ-नियम-चौड़ाई
  • नियम की चौड़ाई को परिभाषित करता है।
• स्तंभ-नियम-
  • सभी तीन कॉलम नियम गुणों को एक साथ परिभाषित करने वाली एक आशुलिपि संपत्ति।

CSS3 के कॉलम ब्रेक, फैले हुए कॉलम और कॉलम भरना

स्तंभ विराम समान CSS2 विकल्पों का उपयोग पृष्ठांकित सामग्री में विराम को परिभाषित करने के लिए करते हैं, लेकिन तीन नए गुणों के साथ: ब्रेक-पहले, ब्रेक-आफ्टर, तथा ब्रेक-अंदर.

टेबल की तरह, आप कॉलम-स्पैन प्रॉपर्टी के साथ कॉलम को स्पैन करने के लिए एलिमेंट सेट कर सकते हैं। यह आपको ऐसी सुर्खियाँ बनाने की अनुमति देता है जो एक अखबार की तरह कई कॉलमों को फैलाती हैं।

कॉलम भरने से तय होता है कि प्रत्येक कॉलम में कितनी सामग्री होगी। संतुलित कॉलम प्रत्येक कॉलम में समान मात्रा में सामग्री डालने का प्रयास करते हैं जबकि ऑटो केवल सामग्री को तब तक प्रवाहित करता है जब तक कि कॉलम भर न जाए और फिर अगले एक पर चला जाए।

CSS3 में अधिक सुविधाएँ जो CSS2 में शामिल नहीं हैं

CSS3 में बहुत सी अतिरिक्त सुविधाएँ हैं जो CSS2 में मौजूद नहीं थीं, जिनमें शामिल हैं:

• CSS टेम्पलेट लेआउट मॉड्यूल और CSS3 ग्रिड पोजिशनिंग मॉड्यूल: सीएसएस के साथ ग्रिड बनाना।
• CSS3 टेक्स्ट मॉड्यूल: पाठ की रूपरेखा तैयार करें और सीएसएस के साथ ड्रॉप-शैडो भी बनाएं।
• CSS3 रंग मॉड्यूल: अब अस्पष्टता के साथ।
• बॉक्स मॉडल में परिवर्तन: सहित मार्की संपत्ति जो आईई टैग की तरह कार्य करती है।
• CSS3 यूजर इंटरफेस मॉड्यूल: आपको नए कर्सर, क्रियाओं के प्रतिसाद, आवश्यक फ़ील्ड, और यहां तक ​​कि आकार बदलने वाले तत्व प्रदान करना।
• मीडिया के प्रश्नों: मीडिया के प्रश्नों स्टाइल शीट का उपयोग कैसे किया जाना चाहिए, यह परिभाषित करते समय आपको अधिक लचीलेपन की अनुमति देता है। उदाहरण के लिए, आप एक स्टाइल शीट को परिभाषित कर सकते हैं जो केवल हैंडहेल्ड डिवाइस के लिए है जिसका व्यूपोर्ट 20em से बड़ा है।
• CSS3 रूबी मॉड्यूल: उन भाषाओं के लिए समर्थन प्रदान करता है जो दस्तावेज़ों को एनोटेट करने के लिए टेक्स्ट रूबी का उपयोग करती हैं।
• CSS3 पृष्ठांकित मीडिया मॉड्यूल: पृष्ठांकित मीडिया (कागज, पारदर्शिता, आदि) के लिए और भी अधिक समर्थन के लिए।
• उत्पन्न सामग्री: चल रहे शीर्षलेख और पादलेख, फ़ुटनोट, और अन्य सामग्री जो प्रोग्रामेटिक रूप से उत्पन्न होती है, विशेषकर पृष्ठांकित मीडिया के लिए
• CSS3 भाषण मॉड्यूल: कर्ण सीएसएस में परिवर्तन।