यहां 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;
   }

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