"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > 4 के लिए आधुनिक सीएसएस सुविधाएँ

4 के लिए आधुनिक सीएसएस सुविधाएँ

2024-11-02 को प्रकाशित
ब्राउज़ करें:238

odern CSS features for 4

यहां 2024 के लिए पांच आधुनिक सीएसएस विशेषताएं दी गई हैं, प्रत्येक के लिए उदाहरण कोड के साथ:

  1. :has() चयनकर्ता:
    • यह आपको मूल तत्व को उसके बच्चों के आधार पर स्टाइल करने की अनुमति देता है।

यदि पैरेंट डिव में .सक्रिय चाइल्ड है तो उसे स्टाइल करें

div:has(.active) {
       background-color: lightgreen;
   }
  1. कंटेनर क्वेरीज़:
    • ये कंटेनर के आकार के आधार पर प्रतिक्रियाशील डिज़ाइन सक्षम करते हैं।

कंटेनर के आकार के आधार पर कार्ड का लेआउट बदलें

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }
  1. नेस्टिंग चयनकर्ता:
    • सीएसएस अब क्लीनर कोड के लिए नेस्टिंग नियमों का समर्थन करता है।

कार्ड के भीतर एक बटन के लिए नेस्टेड शैलियाँ

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }
  1. टेक्स्ट-रैप संपत्ति: यह प्रॉपर्टी टेक्स्ट को पंक्तियों में समान रूप से वितरित करने में मदद करती है।

पैराग्राफ में टेक्स्ट को संतुलित करने के लिए टेक्स्ट-रैप का उपयोग करें

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }
  1. : फोकस-दृश्यमान छद्म वर्ग:
    • यह कीबोर्ड नेविगेशन के माध्यम से केंद्रित तत्वों को स्टाइल करके पहुंच में सुधार करता है।

कीबोर्ड के माध्यम से फोकस करने पर इनपुट फ़ील्ड को हाइलाइट करें

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

ये उदाहरण बताते हैं कि आपके सीएसएस में प्रत्येक सुविधा को कैसे लागू किया जाए, जिससे आपके वेब डिज़ाइन की प्रतिक्रिया और पहुंच बढ़ सके।

विज्ञप्ति वक्तव्य इस लेख को पुन: प्रस्तुत किया गया है: https://dev.to/rajeshkumaryadavdotcom/5-modern-css-features-for-2024-1ole?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3