CSS2 आणि CSS3 मधील फरक

CSS3 मध्ये मोठे बदल समजून घेणे

CSS2 आणि CSS3 मधील सर्वात मोठा फरक असा आहे की, CSS3 हे मॉड्यूड नावाचे विविध विभागांमध्ये विभागले गेले आहेत. प्रत्येक मॉड्यूल, शिफारसी प्रक्रियेच्या विविध टप्प्यात W3C च्या माध्यमातून मार्ग तयार करत आहे. या प्रक्रियेने विविध उत्पादकांनी ब्राउझरमध्ये स्वीकृत केलेल्या आणि कार्यान्वित करणे विविध वेगवेगळ्या तुकड्यांसाठी सोपे केले आहे.

जर आपण या प्रक्रियेची तुलना CSS2 सह झाले असेल तर सर्व कोस्टाइड स्टाईल शीट्सच्या माहितीसह एक कागदपत्र म्हणून सर्व काही सबमिट केले आहे, तर आपण शिफारस थोडक्यात, व्यक्तिगत तुकडे मोडण्यातील फायदे पाहण्यास सुरुवात करतो. कारण प्रत्येक मॉड्यूल वैयक्तिकरित्या कार्यरत आहे, कारण आपल्याकडे CSS3 मॉड्यूलसाठी ब्राउझरची विस्तृत श्रेणी आहे.

कोणत्याही नवीन आणि बदलणार्या विनिर्देशाप्रमाणेच, आपल्यास CSS3 पृष्ठे एकाएकी अनेक ब्राउझर्स आणि ऑपरेटिंग सिस्टीममध्ये चांगल्या प्रकारे तपासू शकता. लक्षात ठेवा की प्रत्येक ब्राऊजरमध्ये वेब पेज तयार करणेच नव्हे तर CSS3 शैलीसह आपण वापरत असलेल्या कोणत्याही शैली, त्यांना समर्थन देणाऱ्या ब्राऊजरमध्ये चांगले दिसतात आणि जुन्या ब्राऊजरसाठी ते परत हळूवारपणे पडतात याची खात्री करा. करू नका.

नवीन CSS3 निवडक

CSS3 नवीन सीएसएस निवडकर्त्यांसोबत तसेच नवीन संयोजक आणि काही नवीन छद्म घटकांसह आपण सीएसएस नियम लिहू शकता अशा नवीन मार्गांचा एक समूह ऑफर करतो.

तीन नवीन विशेषता निवडक:

• गुणधर्म सुरुवातीस तंतोतंत घटक जुळतात [foo ^ = "bar"] या घटकामध्ये "bar" उदा सह प्रारंभ होणारी फू नावाची विशेषता आहे
• गुणधर्म समाप्त करणारा घटक तंतोतंत जुळतो [foo $ = "bar"] घटक मध्ये "Foo" असे एक विशेषता आहे ज्यात "बार" उदा.
• विशेषतामध्ये घटक जुळतो [foo * = "bar"] घटक मध्ये "Foo" असे एक विशेषता आहे ज्यात स्ट्रिंग "बार" उदा.

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

• :मूळ
  • दस्तऐवजाचा मूळ घटक. HTML मध्ये हे नेहमीच असते.
• : nth-child (n)
  • हे अचूक मुलास घटकांशी जुळण्यासाठी किंवा पर्यायी सामने मिळविण्यासाठी व्हेरिएबल्सचा वापर करण्यासाठी वापरा.
• : nth-last-child (n)
  • अंतिम एक पासून मोजणी तंतोतंत बालक घटक जुळवा.
• : nth-of-type (n)
  • कागदपत्र वृक्षापूर्वी समान नावाचे भावनिक मित्र जुळवा.
• : nth-last-of-type (n)
  • तळापासून मोजत असलेल्या एकाच नावाचे भावंडे जुळणारे घटक जुळवा.
• :शेवटचे मुल
  • पालकांचा शेवटचा मूल घटक जुळवा.
• : पहिल्या-ऑफ-प्रकारचे
  • त्या प्रकारचे प्रथम भावनिक घटक जुळवा.
• : गेल्या-प्रकारचे
  • त्या प्रकारचे शेवटचे भावनिक घटक जुळवा.
• : फक्त-बाळ
  • त्याच्या पालकांचे एकमात्र मूल असलेले घटक जुळवा.
• : फक्त-प्रकारचे
  • त्यातील एक प्रकारचे घटक जुळवा.
• : रिक्त
  • मुले नसलेले घटक जुळवा (मजकूर नोडसह).
• : लक्ष्य
  • संदर्भ URI चे लक्ष्य असलेले एक घटक जुळवा.
• : सक्षम
  • घटक सक्षम करा जेव्हा तो सक्षम केला असेल.
• : अक्षम केले
  • घटक अक्षम करा जेव्हा ते अक्षम होईल
• : तपासले
  • घटक तपासल्यावर तपासणी करा (रेडिओ बटण किंवा चेकबॉक्स).

• : नाही (नां)
  • जेव्हा साधी निवडक एस जुळत नाही तेव्हा जुळवा.

एक नवीन संयोजक:

• घटक ए ~ घटक बी
  • एलिमेंट 'ए' नंतर 'ए' नंतर येतो, नंतर लगेचच आवश्यक नाही.

नवीन गुणधर्म

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

CSS3 मध्ये, बॉक्स मॉडेल बदलला नाही. पण आपल्या शैलीचे बॅकग्राउंड्स आणि किनाऱ्यांचा शैली आपल्याला मदत करू शकणार्या नवीन शैलीच्या गुणधर्मांचा एक समूह आहे.

एकाधिक पार्श्वभूमी I mages

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

नवीन पार्श्वभूमी शैली गुणधर्म

CSS3 मध्ये काही नवीन पार्श्वभूमी गुणधर्म देखील आहेत.

• पार्श्वभूमी क्लिप
  • ही स्थळ परिभाषित करते की पार्श्वभूमीची प्रतिमा कशी कापली गेली पाहिजे. डीफॉल्ट सीमा बॉक्स आहे, परंतु तो पॅडिंग बॉक्समध्ये किंवा सामग्री बॉक्समध्ये बदलता येऊ शकतो.
• पार्श्वभूमी-मूळ
  • हे ठिकाण पॅडिंग बॉक्समध्ये, पार्श्वभूमी बॉक्समध्ये किंवा सामग्री बॉक्समध्ये पार्श्वभूमी असावी किंवा नाही हे निर्धारित करते.
• पार्श्वभूमी-आकार
  • ही प्रॉपर्टी आपल्याला बॅकग्राउंड प्रतिमाचा आकार दर्शविण्यास अनुमती देते. हे आपल्याला पृष्ठावर फिट करण्यासाठी लहान प्रतिमांना काढण्याची परवानगी देते.

विद्यमान पार्श्वभूमी शैलीतील बदल

विद्यमान पार्श्वभूमी शैली गुणधर्मांमध्ये देखील काही बदल आहेत:

• पार्श्वभूमी-पुनरावृत्ती
  • या मालमत्तेसाठी दोन नवीन मूल्ये आहेत: अवकाश आणि गोल रिकाम्या जागेत रिकाम्या जागेत रिकाम्या जागेत जागा रिकामी बनते. गोल पार्श्वभूमी प्रतिमेचे पुनर्व्यवस्थित करते जेणेकरून ते बॉक्समध्ये पूर्ण संख्या टाइल करेल.
• पार्श्वभूमी-संलग्नक
  • एक नवीन मूल्य "स्थानिक" जोडले आहे जेणेकरून त्या घटकाची स्क्रोल बार असेल तेव्हा पार्श्वभूमी घटकांच्या घटकांसह स्क्रोल करेल
• पार्श्वभूमी
  • पार्श्वभूमी लघुलिपी मालमत्ता आकार आणि मूळ गुणधर्मांमध्ये जोडते.

CSS3 सीमा गुणधर्म

CSS3 बॉर्डर मध्ये आपण वापरलेल्या (घन, डबल, डॅश इ.) शैली असू शकतात किंवा ते एक प्रतिमा असू शकतात तसेच, CSS3 गोलाकार कोन तयार करण्याची क्षमता आणते. बॉर्डरची चित्रे मनोरंजक आहेत कारण आपण सर्व चार बॉर्डरची प्रतिमा तयार केली आणि नंतर सीएसएस ला आपल्या सीमेवरील ती प्रतिमा कशी लावावी ते सांगा.

नवीन बॉर्डर शैली गुणधर्म

CSS3 मध्ये काही नवीन सीमा गुणधर्म आहेत:

• सीमा-त्रिज्या
  • सीमा-शीर्ष-उजवा-त्रिज्या , सीमा-खाली-उजवा-त्रिज्या , सीमा-खाली-डावा-त्रिज्या , सीमा-शीर्ष-बायां-त्रिज्या
  • या गुणधर्मांमुळे आपण आपल्या सीमांवर गोलाकार कोपर तयार करू शकता.
• सीमा-प्रतिमा-स्रोत
  • आधीच परिभाषित केलेल्या सीमा शैलीऐवजी प्रतिमा स्रोत फाइल निर्दिष्ट करते
• सीमा-प्रतिमा-स्लाइस
  • सीमा प्रतिमा किनार्यांमधून अंतर्ग्रहण ऑफसेट दर्शवते
• सीमा-प्रतिमा-रुंदी
  • आपल्या सीमा प्रतिमासाठी रुंदीचे मूल्य परिभाषित करते
• सीमा-प्रतिमा-प्रारंभ
  • सीमा प्रतिमा क्षेत्र सीमा चौकटीच्या पलीकडे विस्तारत असलेली रक्कम निर्दिष्ट करते
• सीमा-प्रतिमा-ताणून
  • सीमावर्ती प्रतिमेच्या बाजू आणि मध्यभागी भाग टाइल किंवा आकाराने कसे करावे हे स्पष्ट करते.
• सीमा-प्रतिमा
  • सर्व सीमा प्रतिमा गुणधर्मांसाठी लघुलिपी ठिकाण.

सीमा आणि पार्श्वभूमीशी संबंधित अतिरिक्त CSS3 गुणधर्म

जेव्हा बॉक्स ब्रेकवर एखादा बॉक्स खंडित झाला, तेव्हा लाइन ब्रेक (इनलाइन घटकांसाठी) साठी स्तंभ खंड बॉक्स-सजावट-ब्रेक गुणधर्म परिभाषित करतो नवीन बॉक्स् सीमा आणि पॅडिंगसह कसे गुंडाळले जातात. या मालमत्तेचा वापर करून बॅकग्राउंड्सला अनेक तुटलेली बॉक्स दरम्यान विभागता येते.

एक बॉक्स-साइड गुणधर्म देखील आहे ज्याचा वापर बॉक्स घटकांना छायांकरीता जोडण्यासाठी केला जाऊ शकतो.

CSS3 सह, आपण सहजपणे टेबल किंवा जटिल डिव्ह टॅग संरचनांशिवाय एकाधिक स्तंभांसह वेब पृष्ठ सेट करू शकता. आपण फक्त ब्राउझरला सांगू शकता की शरीराच्या घटकांचे किती स्तंभ असणे आवश्यक आहे आणि ते किती विस्तृत असावे. तसेच आपण सीमा (नियम), पार्श्वभूमी रंग जो कमाल स्तंभ परिधान करू शकता, जोडू शकता आणि आपले मजकूर आपोआप सर्व कॉलममधून प्रवाह करेल.

CSS3 स्तंभ - स्तंभाची संख्या आणि रुंदी परिभाषित करा

तीन नवीन गुणधर्म आहेत ज्यामुळे आपण आपल्या कॉलम्सची संख्या आणि रुंदी परिभाषित करू शकता.

• स्तंभ-रूंदी
  • आपल्या स्तंभाची मर्यादा निश्चित करते. त्यानंतर मजकूराची जागा त्या रुंदीच्या स्तंभासह भरण्यासाठी मजकूर पाठवेल.
• स्तंभ-गणना
  • पृष्ठावर स्तंभांची संख्या परिभाषित करते त्यानंतर ब्राऊझर जागेमध्ये फिट करण्यासाठी पुरेशी स्तंभ तयार करेल, परंतु आपण निर्दिष्ट केलेल्या क्रमांकाची संख्या.
• स्तंभ
  • लघुलिपीतील प्रॉपर्टी जेथे आपण रूंदी किंवा संख्या (किंवा दोन्ही, परंतु क्वचितच अर्थ प्राप्त होते) परिभाषित करू शकता.

CSS3 स्तंभ अंतर आणि नियम

त्याच multicolumn परिस्थिती मध्ये स्तंभ दरम्यान अंतर आणि नियम ठेवले आहेत अंतर वेगवेगळे स्तंभ ढकलले जाईल परंतु नियम काही जागा घेऊ शकणार नाहीत. जर स्तंभ नियम त्याच्या अंतरापेक्षा जास्त रूंद असेल तर, तो संलग्न कॉलम्सवर ओव्हरलॅप होईल. स्तंभ नियम आणि अंतर साठी पाच नवीन गुणधर्म आहेत:

• स्तंभ-अंतर
  • स्तंभ दरम्यान अंतर च्या रुंदी परिभाषित.
• स्तंभ-नियम-रंग
  • नियमांचा रंग निश्चित करते.
• स्तंभ-नियम-शैली
  • नियमाची शैली परिभाषित करते (घन, चिन्हित, दुहेरी, वगैरे.)
• स्तंभ-नियम-रूंदी
  • नियमांची रूंदी परिभाषित करते.
• स्तंभ-नियम
  • सर्व तीन स्तंभ नियम गुणधर्मांना एकाच वेळी परिभाषित करणारी एक लघुलिपी असलेली मालमत्ता.

CSS3 कॉलम ब्रेक्स, स्पॅनिंग स्तंभ आणि फिलिंग कॉलम

स्तंभ ब्रेक्स हे त्याच CSS2 पर्याय वापरतात जो पृष्ठांकित सामग्रीमध्ये ब्रेक परिभाषित करतात, परंतु तीन नवीन गुणधर्मांसह: ब्रेक-आधी , ब्रेक-इन आणि ब्रेक-इन

टेबल प्रमाणेच, आपण कॉलम-स्पॅन प्रॉपर्टीसह कॉलम्स स्पॅन करण्यासाठी घटक सेट करू शकता. हे आपल्याला वृत्तपत्रासारख्या मल्टिपल स्तंभ अधिक स्पॅन करण्यासाठी मथळे तयार करण्याची अनुमती देते.

प्रत्येक कॉलममध्ये किती सामग्री असेल हे कॉलम्स भरणे हे ठरविते. बॅलन्स्ड स्तंभ प्रत्येक स्तंभातील समान रक्कम ठेवण्याचा प्रयत्न करतात जेणेकरून आपोआप सामग्री पूर्णत: होईपर्यंत स्तंभ पूर्ण होईल आणि नंतर पुढच्या नंबरवर जाईल.

CSS3 मधील अधिक वैशिष्ट्ये जे CSS2 मध्ये समाविष्ट नाहीत

CSS3 मध्ये बरेच अतिरिक्त वैशिष्ट्ये आहेत जी CSS2 मध्ये अस्तित्वात नाहीत, यासह:

• सीएसएस टेम्पलेट लेआउट मॉड्यूल आणि CSS3 ग्रीड पोझिशनिंग मॉड्यूल : CSS सह ग्रीड तयार करणे.
• CSS3 मजकूर मॉड्यूल : मजकूर बाह्यरेखा आणि CSS सह ड्रॉप-छाया तयार करा.
• CSS3 रंग मॉड्यूल : आता अपारदर्शकतेसह.
• बॉक्स मॉडेलमध्ये बदल : IE टॅग सारख्या कृती करणारा एक भव्य मालमत्ता समाविष्ट करणे
• CSS3 यूझर इंटरफेस मॉड्यूल : आपल्याला नवीन कर्सर, कृतींच्या प्रतिसाद, आवश्यक फील्ड आणि घटकांचा आकार बदलणे
• मीडिया क्वेरी : मीडिया क्वेरी आपल्याला शैलीची शैली कशी वापरावी हे निर्धारित करतेवेळी अधिक लवचिकतेला अनुमती देते उदाहरणार्थ, आपण एक शैली पत्रक परिभाषित करू शकता जी केवळ हाताने केलेल्या डिव्हाइसेससाठी आहे जी व्यूअर 20em पेक्षा मोठी आहे.
• CSS3 रुबी मॉड्यूल : दस्तऐवजांवरील भाष्य करण्यासाठी मजकूर संदेशास वापरणार्या भाषांसाठी समर्थन प्रदान करते.
• CSS3 पेड मीडिया मॉड्यूल : पेज्ड मीडियासाठी अधिक समर्थन (पेपर, पारदर्शकता इ.)
• व्युत्पन्न सामग्री : एल चालू शीर्षलेख आणि पादने, फूटनोट आणि प्रोग्रामिंगद्वारे तयार केलेली इतर सामग्री, विशेषत: पृष्ठांकित माध्यमासाठी
• CSS3 भाषण मॉड्यूल : कर्ण सीएसएस बदल.