सीएसएस 2 और CSS3 के बीच का अंतर

CSS3 में बड़े बदलावों को समझना

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

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

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

नए CSS3 चयनकर्ताओं

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

तीन नए गुण चयनकर्ता:

• विशेषता प्रारंभिक तत्व से मेल खाती है [foo ^ = "bar"] तत्व में foo नामक एक विशेषता है जो "बार" से शुरू होती है जैसे
• विशेषता समाप्त करने वाले तत्व बिल्कुल तत्व [foo $ = "bar"] तत्व में foo नामक एक विशेषता है जो "बार" के साथ समाप्त होती है जैसे
• विशेषता में मिलान तत्व होता है [foo * = "bar"] तत्व में foo नामक एक विशेषता है जिसमें स्ट्रिंग "बार" है

16 नए छद्म-वर्ग:

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

• : नहीं (रों)
  • मिलान करें जब तत्व सरल चयनकर्ता से मेल नहीं खाता है।

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

• elementA ~ elementB
  • जब तत्व बी तत्व के बाद कहीं भी आता है, तो तुरंत जरूरी नहीं है।

नई गुण

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

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

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

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

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

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

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

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

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

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

CSS3 सीमा गुण

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3 कॉलम ब्रेक, कॉलम कॉलिंग, और कॉलम भरना

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

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

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

CSS3 में अधिक विशेषताएं उस एरे को सीएसएस 2 में शामिल नहीं किया गया है

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

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