यहां 2024 के लिए पांच आधुनिक सीएसएस विशेषताएं दी गई हैं, प्रत्येक के लिए उदाहरण कोड के साथ:
यदि पैरेंट डिव में .सक्रिय चाइल्ड है तो उसे स्टाइल करें
div:has(.active) { background-color: lightgreen; }
कंटेनर के आकार के आधार पर कार्ड का लेआउट बदलें
@container (min-width: 500px) { .card { display: flex; flex-direction: row; } } @container (max-width: 499px) { .card { display: block; } }
कार्ड के भीतर एक बटन के लिए नेस्टेड शैलियाँ
.card { background-color: white; padding: 20px; .button { background-color: blue; color: white; padding: 10px; } }
पैराग्राफ में टेक्स्ट को संतुलित करने के लिए टेक्स्ट-रैप का उपयोग करें
p { text-wrap: balance; width: 300px; / Set a width for the effect / }
कीबोर्ड के माध्यम से फोकस करने पर इनपुट फ़ील्ड को हाइलाइट करें
input:focus-visible { outline: 2px solid blue; background-color: lightyellow; }
ये उदाहरण बताते हैं कि आपके सीएसएस में प्रत्येक सुविधा को कैसे लागू किया जाए, जिससे आपके वेब डिज़ाइन की प्रतिक्रिया और पहुंच बढ़ सके।
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3