12 अल्पज्ञात CSS विशेषताएँ

CSS बहुत जटिल भाषा नहीं है। लेकिन यहां तक ​​कि अगर आप कई वर्षों से शैली की चादरें लिख रहे हैं, तो शायद ऐसे समय होते हैं जब आप कुछ नया सीखते हैं: ऐसे गुण या मूल्य जो आपने कभी उपयोग नहीं किए हैं, एक विनिर्देश का विवरण जिसके बारे में आपको कोई पता नहीं था।

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

color न केवल पाठ रंग

आइए शुरू करते हैं साधारण बातों से। color संपत्ति का उपयोग डेवलपर्स द्वारा लगातार किया जाता है। कम सीएसएस अनुभव वाले आप यह नहीं जानते होंगे कि यह संपत्ति केवल पाठ के रंग से अधिक निर्धारित करती है!






ध्यान दें कि CSS में color:yellow संपत्ति का उपयोग केवल एक बार body तत्व के लिए किया जाता है। जैसा कि आप देख सकते हैं, सब कुछ पीला हो गया:

• लापता छवि के स्थान पर वैकल्पिक पाठ
• सूची आइटम के लिए बॉर्डर
• बुलेट सूची सूची
• क्रम संख्या सूची
• तत्व

दिलचस्प बात यह है कि डिफ़ॉल्ट रूप से, hr तत्व color संपत्ति के मूल्य को प्राप्त नहीं करता है, लेकिन यह border-color संपत्ति को inherit करने के लिए निर्धारित करके प्राप्त किया जा सकता है। मेरे लिए, यह थोड़ा अजीब व्यवहार है।

प्रदर्शित विनिर्देश द्वारा पुष्टि की गई है :

यह गुण तत्व की पाठ सामग्री के अग्रभूमि रंग का वर्णन करता है। इसके अतिरिक्त, यह अप्रत्यक्ष रूप से अन्य गुणों द्वारा उपयोग किया जा सकता है जो रंग मूल्यों पर लेते हैं।

मुझे अभी तक यह पता नहीं चला है कि यह "अग्रभूमि" क्या है, लेकिन यदि आप कुछ जानते हैं, तो टिप्पणियों में इसके बारे में लिखें। जैसा कि मैं इसे समझता हूं, इस मामले में अग्रभूमि पाठ के रंग को संदर्भित करता है, न कि पृष्ठभूमि, साथ ही गैर-पृष्ठभूमि तत्वों - लगभग। दुभाषिया।

visibility संपत्ति collapse सकती है

आपने visibility गुण का उपयोग एक से अधिक बार किया होगा। "सामान्य" मान visible (सभी तत्वों के लिए डिफ़ॉल्ट रूप से) और hidden , जो तत्व को छुपाता है, इसके लिए एक स्थान छोड़ता है ( display:none विपरीत display:none )।

तीसरा, शायद ही कभी इस्तेमाल किया मूल्य collapse । यह तालिका पंक्तियों, स्तंभों और उनके समूहों को छोड़कर सभी तत्वों के लिए hidden तरीके से काम करता है। तालिका तत्वों के मामले में, यह माना जाता है कि collapse मूल्य उन्हें display:none तरह छिपाएगा display:none ताकि तालिका की अन्य सामग्री उस स्थान पर स्थित हो, जहां वे पहले कब्जा कर चुके थे।


अपेक्षित व्यवहार

दुर्भाग्य से, सभी ब्राउज़र इस मान को उसी तरह से नहीं संभालते हैं। इस कारण से, CSS-Tricks पंचांग इस संपत्ति का उपयोग करने की अनुशंसा बिल्कुल नहीं करता है । डेमो का प्रयास करें।

मैंने जो खोजा है उससे:

• क्रोम में, collapse और hidden बीच कोई अंतर नहीं है (इस बग रिपोर्ट और टिप्पणियों को देखें )
• फ़ायरफ़ॉक्स, ओपेरा और IE 11 में, collapse रूप में यह काम करना चाहिए लगता है: तालिका की पंक्ति हटा दी जाती है, और जो कम थी वह ऊपर जाती है

अब आप थोड़ा और जानते हैं, हालांकि, visibility:collapse का उपयोग करके ब्राउज़रों के अलग-अलग व्यवहार के कारण visibility:collapse शायद ही समझ में आता है।

नई background संपत्ति मूल्य

CSS 2.1 में, background संपत्ति के एक संक्षिप्त रिकॉर्ड में निम्नलिखित गुणों के लिए पांच मान शामिल थे: background-color , background-image , background-repeat , background-attachment और background-position । CSS 3 से शुरू होकर, तीन और मूल्य जोड़े गए, इसलिए यह संपत्ति अब इस तरह दिखती है:

 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip] 

स्लैश पर ध्यान दें, जो कि font और border-radius [लिंक] संपत्ति के एक छोटे रिकॉर्ड की तरह वहां सेट है। यह स्लैश आपको उन ब्राउज़र में background-position बाद background-size मूल्य को शामिल करने की अनुमति देगा जो इसका समर्थन करते हैं। आप दो और मूल्य भी जोड़ सकते हैं: background-origin और background-clip ।

अंतिम वाक्यविन्यास:

 .example { background: aquamarine url(img.png)              no-repeat              scroll              center center / 50%              content-box content-box; } 

आप इसे यहाँ आज़मा सकते हैं ।
नए मूल्य सभी आधुनिक ब्राउज़रों में काम करते हैं, हालांकि, आपको पुराने लोगों के बारे में नहीं भूलना चाहिए, पर्याप्त प्रतिस्थापन की पेशकश करता है।

clip प्रॉपर्टी केवल पूरी तरह से तैनात तत्वों पर काम करती है।

निश्चित रूप से आप clip प्रॉपर्टी के बारे में जानते हैं। यह इस तरह प्रयोग किया जाता है:

 .example {    clip: rect(110px, 160px, 170px, 60px); } 

यह नियम पिक्सेल की निर्दिष्ट संख्या से चार तरफ से एक तत्व "क्रॉप" करेगा। एकमात्र चेतावनी यह है कि जिस तत्व को आप इस संपत्ति पर लागू करते हैं वह बिल्कुल तैनात होना चाहिए।

 .example { position: absolute;    clip: rect(110px, 160px, 170px, 60px); } 

अब देखें कि यदि हम तत्व की पूर्ण स्थिति को हटा देते हैं तो clip प्रॉपर्टी कैसे काम करना बंद कर देती है।

position:absolute अलावा position:absolute आप भी position:fixed उपयोग कर सकते हैं position:fixed , क्योंकि, प्रलेखन के अनुसार, निश्चित तत्व भी "बिल्कुल तैनात" के रूप में अर्हता प्राप्त करते हैं।

ऊर्ध्वाधर प्रतिशत की गणना कंटेनर की चौड़ाई के सापेक्ष की जाती है, इसकी ऊंचाई नहीं।

पहले तो इसे समझना मुश्किल है, और मैंने इसके बारे में लिखा है । शायद आप जानते हैं कि तत्वों की लंबाई, प्रतिशत के रूप में इंगित की जाती है, उनकी कंटेनर की लंबाई के आधार पर गणना की जाती है। तो, ऊपरी और निचले आंतरिक मार्जिन (पैडिंग) और उसी बाहरी मार्जिन की गणना कंटेनर की चौड़ाई के आधार पर की जाती है, न कि इसकी ऊंचाई पर।

डेमो देखें ।

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

सीमा संपत्ति

हमने यह सब किया है:

 .example {  border: 1px solid black; } 

border संपत्ति border-width , border-style और border-color गुणों के मूल्यों को एक निर्माण में जोड़ती है। लेकिन यह मत भूलो कि प्रत्येक गुण जिनके मूल्य में border वह स्वयं एक संक्षिप्त संकेतन है। इसलिए, उदाहरण के लिए, border-width निम्नानुसार लिखी जा सकती है:

 .example {  border-width: 2px 5px 1px 0; } 

इस प्रकार, हम तत्व के सभी चार पक्षों के लिए एक अलग फ्रेम चौड़ाई निर्धारित करेंगे। यही बात border-style और border-color गुणों पर लागू होती है। इतना भयानक कुछ प्राप्त किया जा सकता है:

एचटीएमएल

 <div class="box"></div> <p>Please don't ever do this.</p> 

आप आगे भी जा सकते हैं और इन मूल्यों को व्यक्तिगत रूप से border-left-style , border-top-width , border-bottom-color और इसी तरह का उपयोग करके सेट कर सकते हैं।

चाल यह है कि border साथ आप विभिन्न पक्षों के लिए अलग-अलग मान सेट नहीं कर सकते। इस प्रकार, एक संक्षिप्त रिकॉर्ड के अंदर एक छोटा रिकॉर्ड की तरह एक छोटा रिकॉर्ड प्राप्त किया जाता है।

text-decoration प्रॉपर्टी अब संक्षिप्त है

मुझे पता था कि इस सूची से कुछ निश्चित रूप से आपका सिर मुड़ जाएगा। और विनिर्देश कहता है कि अब यह एक मानक है।

 a {  text-decoration: overline aqua wavy; } 

इस गुण में अब तीन गुण हो सकते हैं: text-decoration-line , text-decoration-color और text-decoration-style । दुर्भाग्य से, फ़ायरफ़ॉक्स एकमात्र ब्राउज़र है जो नई संपत्तियों का समर्थन करता है, लेकिन एक ही समय में (जाहिर है, पिछड़े संगतता सुनिश्चित करने के लिए) संक्षिप्त रूप सिंटैक्स का समर्थन नहीं करता है।


अपेक्षित परिणाम

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

border-width संपत्ति प्रमुख मूल्यों का समर्थन करती है

यह, ज़ाहिर है, सामान्य से बाहर नहीं है, और नया नहीं है, हालांकि, सामान्य चौड़ाई मूल्यों (जैसे 5px या 1em ) के अलावा border-width तीन प्रमुख मूल्यों का समर्थन करती है: medium , thin और thick ।

वास्तव में, border-width संपत्ति का प्रारंभिक मूल्य medium । नीचे thick का अर्थ है:



CSS विनिर्देश कुंजी मानों के लिए एक विशिष्ट चौड़ाई निर्दिष्ट नहीं करता है, लेकिन सभी ब्राउज़र क्रमशः 1px , 3px और 5px उपयोग करते हैं।

"कोई भी border-image का उपयोग नहीं करता है"

इतना समय पहले मैंने साइटप्वाइंट पर border-image प्रॉपर्टी के बारे में नहीं लिखा था। यह IE और 10 के नीचे के अपवाद के साथ सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। लेकिन परवाह किसे है?

border-image एक बहुत ही मजेदार प्रॉपर्टी है जो आपको कंटेनर को किसी प्रकार की छवि के साथ फ्रेम करने की अनुमति देता है।



डेमो भी देखें।

दुर्भाग्य से, border-image नए उत्पादों में से एक है जो बहुत लोकप्रिय नहीं है। हालाँकि, शायद मैं गलत हूँ। यदि आपके पास border-image उदाहरण हैं, तो टिप्पणियों में आपका स्वागत है!

इस तरह की एक संपत्ति empty-cells

और यह IE 8 सहित सभी ब्राउज़रों द्वारा समर्थित है:

 table { empty-cells: hide; } 

मुझे लगता है कि आप पहले से ही समझ गए थे कि इस संपत्ति का उपयोग तालिकाओं के संबंध में किया जाता है। यह ब्राउज़र को खाली कोशिकाओं को छिपाने या दिखाने के लिए कहता है। इस डेमो की कोशिश करो।

इस मामले में, मैंने जानबूझकर कोशिकाओं पर एक फ्रेम सीमा निर्धारित की और छोटे संकेत जोड़े ताकि दोनों राज्यों के बीच अंतर दिखाई दे, हालांकि कुछ मामलों में इस संपत्ति को बदलने का कोई दृश्य प्रभाव नहीं हो सकता है।

font-style संपत्ति oblique मूल्य का समर्थन करती है

इस संपत्ति के लिए सबसे अधिक उपयोग किए जाने वाले मूल्य normal और italic । लेकिन oblique भी है।



और इसका क्या मतलब है? पाठ वैसा ही क्यों दिखता है जैसा कि इटैलिक में लिखा गया था?

विनिर्देश इस व्यवहार की व्याख्या इस प्रकार है:

... तिरछा के रूप में चिह्नित फ़ॉन्ट का चयन करता है, अन्यथा इटैलिक।

विनिर्देश में इटैलिक का वर्णन लगभग उसी के बारे में है। शब्द "तिरछी" - टाइपोग्राफी से, वास्तव में, तिरस्कार पाठ, लेकिन एक असली इतालवी नहीं है।

सीएसएस तिरछा पाठ इस तरह से व्यवहार करता है कि oblique मान italic साथ विनिमेय है (जैसा कि विनिर्देश कहता है) जब तक कि उपयोग किए गए फ़ॉन्ट का अलग तिरछा फ़ॉन्ट नहीं होता।

मुझे ऐसे फोंट नहीं मालूम हैं जिनमें एक तिरछी शैली होगी, लेकिन मैं गलत हो सकता हूं। (यह गलत है। मैं खुद को विशिष्ट फ़ॉन्ट नाम नहीं दे सकता (वे निश्चित रूप से मौजूद हैं), लेकिन मूल लेख की टिप्पणियों में वे एक उदाहरण के रूप में हेलवेटिका फ़ॉन्ट देते हैं, अनुवादक की एक टिप्पणी) जैसा कि मैं समझता हूं, एक फ़ॉन्ट में दोनों शैली नहीं हो सकती हैं - इटैलिक और तिरछा - एक ही समय में, चूंकि तिरछा शैली उन फोंट में इटैलिक के लिए एक कृत्रिम प्रतिस्थापन है जिसमें यह नहीं है। (यहां, भी, कुछ संदेह है, खासकर इटालिक्स की जगह के संबंध में - लगभग। अनुवादक। अनुवादक

इसलिए यदि मैं गलत नहीं हूँ, जब फ़ॉन्ट में इटैलिक नहीं है, तो font-style:italic का मूल्य font-style:italic प्रॉपर्टी वास्तव में हमें font-style:oblique संपत्ति का मूल्य दिखाएगी।

शब्दावली में भ्रम के बारे में टिप्पणियों के लिए बहुत बहुत धन्यवाद, अब यह तय हो गया है और "हेडसेट" के बजाय - "शैली", और "इतालवी" के बजाय - "इटैलिक्स" - लगभग। अनुवाद

word-wrap - overflow-wrap समान

word-wrap संपत्ति का उपयोग अक्सर नहीं किया जाता है, लेकिन यह कुछ मामलों में उपयोगी हो सकता है। एक बहुत ही सामान्य उदाहरण कंटेनर के बाहर जाने से बचने के लिए पाठ की एक लंबी निरंतर रेखा को तोड़ रहा है।

चूंकि यह संपत्ति Microsoft द्वारा आविष्कार की गई थी, इसलिए यह संस्करण 5.5 से IE सहित सभी ब्राउज़रों द्वारा समर्थित है।

क्रॉस-ब्राउज़र एक्सेसिबिलिटी और उचित समर्थन के बावजूद, W3C ने word-wrap प्रॉपर्टी को overflow-wrap साथ बदलने का फैसला किया: जाहिरा तौर पर, उन्होंने पिछले नाम को गलत माना। overflow-wrap word-wrap के समान अर्थ हैं, और बाद वाले को अब "वैकल्पिक" माना जाता है।

इस तथ्य के बावजूद कि overflow-wrap लिए समर्थन अभी भी बहुत व्यापक नहीं है, आपको चिंता नहीं करनी चाहिए, क्योंकि हम अभी भी word-wrap उपयोग कर सकते हैं: ब्राउज़र पिछड़े संगतता के लिए भी इसका समर्थन करते हैं।

overflow-wrap , यह तब होता है जब सभी लोकप्रिय ब्राउज़र अपडेट किए जाते हैं, लेकिन अब मैं कुछ भी बदलने का कोई कारण नहीं देखता।

इस सब से आपने कितना नया सीखा है?

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

टिप्पणियों में आपका स्वागत है!