👍🏼 🎅🏿 🎽 सीएसएस 3 में सुविधाएँ और रबर साइटों के लिए सुविधाओं के बारे में थोड़ा सा ㊗️ 👩🏿‍🍳 🍛

दिन का अच्छा समय। मैं आपको css 3 में फ़ंक्शंस की प्रवृत्ति के बारे में बताना चाहता हूं कि यह कैसे और यहां तक कि कभी-कभी परियोजनाओं में उपयोग करने की आवश्यकता होती है।

अपना समय बर्बाद न करने के लिए, मैं उन गुणों का वर्णन करूंगा, जिनके बारे में मैं आपको बताना चाहता हूं:

काउंटर फ़ंक्शन
कैल्क समारोह
कार्य समारोह
टॉगल फ़ंक्शन
माप की इकाई - रेम
माप की इकाई - vw
माप की इकाई - vh

Css 3 में कार्य

महान उल्लास डेवलपर्स के पैर के माध्यम से बहता है जब हमें पहले कार्यों में से एक मिला - मीडिया प्रश्न , जिसने हमें विभिन्न बाहरी कारकों के आधार पर कुछ शैलियों को स्वीकार करने की अनुमति दी। वास्तव में, यह css 2.1 में मानकीकृत कार्यक्षमता के लिए एक बढ़िया अतिरिक्त था।

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

W3c यहीं नहीं रुका, और हाल ही में हमने एक फ़ंक्शन के बारे में सुना जैसे कि सपोर्ट या CSS फ़ीचर क्वैरीज़ , जो केवल संस्करण 21 से फ़ायरफ़ॉक्स में समर्थित है, संस्करण 28 से क्रोम और नवीनतम (12.1) ओपेरा में।

ये हमारे सितारे हैं, वे सुर्खियों में हैं, और हर कोई उन्हें प्यार करता है। उनके साथ, सब कुछ काफी स्पष्ट और स्पष्ट है। अब कम महत्वपूर्ण कार्यों पर एक नज़र डालते हैं।

काउंटर

यह सीएसएस में एक वृद्धि समारोह है, जो कि संस्करण 2.1 के बाद से अस्तित्व में है। वह क्या कर रही है, आप पूछें? और वह निम्नलिखित करती है:
काउंटर फ़ंक्शन आपको एक नाम के साथ एक काउंटर शुरू करने, इसे बढ़ाने और इसे रीसेट करने की अनुमति देता है। काउंटर की सामग्री को छद्म तत्वों के माध्यम से पहले और बाद में प्रदर्शित किया जा सकता है। सामान्य तौर पर, मेरी सूचियों की नकल करने के लिए, हालांकि खुद के लिए, मुझे इस समारोह में कोई लाभ नहीं मिला।

कैल्क

कैल्क फ़ंक्शन आपको उदाहरण के लिए, गुणों में गणना योग्य मान सेट करने की अनुमति देता है:

.column { width: calc( 10px + 2px ); }

यह थोड़ा समझ में आता है, है ना?! लेकिन क्या होगा अगर मैं आपको बताता हूं कि आप विभिन्न प्रकारों के मूल्यों की गणना कर सकते हैं?

 .responsiveColumn { width: calc( 100% / 3 - 20px ); float: left; margin: 0 10px; }

परिणाम क्या है? आप लिंक का अनुसरण करके देख सकते हैं

समर्थन के बारे में:

इंटरनेट एक्सप्लोरर 9+
मोज़िला फ़ायरफ़ॉक्स 19+
Google Chrome 24+
सफारी 6+
ओपेरा समर्थन नहीं करता है

व्यक्तिगत रूप से, मैं वास्तव में इस फ़ंक्शन को पसंद करता हूं, क्योंकि यह आपको कोड को थोड़ा कम करने की अनुमति देगा जब उदाहरण के लिए मुझे एक तत्व को केंद्रित करने की आवश्यकता होती है:

 .box { position: absolute; width: 400px; left: calc( 50% - 200px ); }

टॉगल

टॉगल फ़ंक्शन आपको मूल तत्व की शैलियों के आधार पर कुछ शैलियों को स्वीकार करने की अनुमति देता है।

 .parent { font-style: italic; } .child { font-style: toggle( italic, normal ); }

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

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

attr

मुझे लगता है कि कई लोग एटर फ़ंक्शन से परिचित हैं।

 <div class="new" data-price="99."></div>

 .new { /* some styles */ } .new::after { content: attr(data-price); }

फ़ंक्शन आपको पहले और बाद में छद्म तत्वों के माध्यम से किसी भी विशेषता के मूल्य को प्रदर्शित करने की अनुमति देता है। फ़ंक्शन, वैसे, सीएसएस 2.1 के बाद से भी अस्तित्व में है, हालांकि, इसे संस्करण 3 में एक अपडेट प्राप्त हुआ। यह विशेषता आपको इस तरह की चीजें लिखने की अनुमति देगा:

 <stock> <wood length="12"/> <wood length="5"/> <metal length="19"/> <wood length="4"/> </stock>

 stock > * { display: block; width: attr(length em); /* default 0 */ height: 1em; border: solid thin; margin: 0.5em; }

वर्तमान में इस सुधार का कहीं भी कोई समर्थन नहीं है।

दुर्भाग्य से, यह सामग्री उम्मीदवार की सिफारिश की स्थिति में है और यह अभी तक ज्ञात नहीं है कि उपरोक्त बन्स निकट भविष्य में काम करेंगे या नहीं। दस्तावेज़ में निम्न पंक्ति भी है:

निम्नलिखित विशेषताएं जोखिम में हैं और सीआर अवधि के दौरान गिराए जा सकते हैं: 'कैल्क ()', 'टॉगल ()', 'एटर ()'।

इसलिए हम इन सभी आकर्षण को नहीं देख सकते हैं।

परिणाम

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

रेम, vw और vh

रेम

रेम का मूल्य एमएम के अनुरूप है, केवल इस अंतर के साथ कि यह हमेशा html के मूल्य को देखता है, न कि माता-पिता को नियमित एम के साथ। इसलिए नाम रूट em => rem।

रेम 9 और 10 इंटरनेट एक्सप्लोरर सहित सभी आधुनिक ब्राउज़रों का समर्थन करता है। यदि आप संस्करण 8 का समर्थन करते हैं, तो दुर्भाग्य से आप रेम का उपयोग करने में सक्षम नहीं होंगे।

vw और वीएच

पहली नज़र के नज़रिए में इन अयोग्य के पीछे बहुत स्पष्ट और उपयोगी इकाइयाँ हैं।

1 यूनिट vh या vw उपयोगकर्ता के व्यूपोर्ट की चौड़ाई या ऊंचाई के 1% के बराबर है। इसलिए, 100wh ब्राउज़र विंडो की चौड़ाई के 100% के बराबर होगा, जो कुछ मामलों में उपयोगी हो सकता है, क्योंकि स्वीकार्य चौड़ाई के मूल्य को निर्धारित करते समय, आप मूल चौड़ाई से शुरू नहीं करते हैं, लेकिन व्यूपोर्ट से, जो आप% के साथ नहीं कर पाएंगे।

समर्थन:

इंटरनेट एक्सप्लोरर 9+
मोज़िला फ़ायरफ़ॉक्स 19+
Google Chrome 24+
सफारी 6+
ओपेरा समर्थन नहीं करता है

आपका ध्यान देने के लिए धन्यवाद, मुझे आशा है कि आपको यह हमारे कभी-कभी कठिन व्यवसाय में उपयोगी लगता है।

सीएसएस 3 में सुविधाएँ और रबर साइटों के लिए सुविधाओं के बारे में थोड़ा सा