डेवलपर्स को जावास्क्रिप्ट और सीएसएस के मिश्रण के साथ अपनी वेबसाइटों को अनुकूलित करने में मदद करने के लिए, नए सीएसएस गुण विकसित किए गए हैं और अब लोकप्रिय ब्राउज़रों का समर्थन करते हैं। इनमें से कुछ नीचे सूचीबद्ध हैं -
फोकस-भीतर
इसका उद्देश्य तत्वों के भीतर फोकस-पहुंच-योग्यता को हल करना है
स्क्रॉल-स्नैप
यह मूल स्क्रॉल और मंदी को सक्षम करता है
@media(वरीयता-*)
उपयोगकर्ता की डिवाइस प्राथमिकताओं के अनुसार पेज के UI और UX दोनों को सेट करने में मदद करता है, जिससे उच्च स्तर के वैयक्तिकरण की अनुमति मिलती है।
* प्रकाश-स्तर, मजबूर-रंग, रंग-योजना, कंट्रास्ट, कम-गति और कम-पारदर्शिता को दर्शा सकता है
स्थिति:चिपचिपा
UI को व्यूपोर्ट में रखने के लिए।
मानक लेआउट रखने के लिए तार्किक गुण
हमें तत्वों के भीतर और आसपास गतिशील दिशात्मक अंतर रखने की अनुमति देता है।
अंतर संपत्ति
यह संपत्ति अब फ्लेक्सबॉक्स के लिए उपलब्ध है। गैप कंटेनर को प्रत्येक चाइल्ड एलिमेंट के अपने स्पेसिंग के बजाय स्पेसिंग के मालिक होने के लिए सेट करता है।
बैकफ़्रॉप-फ़िल्टर
किसी तत्व के पीछे की शैलियों को आसानी से सेट करने के लिए।
सीएसएस हौदिनी एपीआई
एक निम्न-स्तरीय एपीआई जो डेवलपर्स को ब्राउज़र को यह बताने की क्षमता देता है कि वे कस्टम सीएसएस को कैसे पढ़ना और समझना चाहते हैं। CSS ऑब्जेक्ट मॉडल अब अधिक उपभोज्य तरीके से डेवलपर्स के लिए सुलभ है। लेआउट एपीआई, पेंट एपीआई, पार्सर एपीआई, प्रॉपर्टीज और वैल्यू एपीआई, एनिमेशनवर्कलेट, टाइप किया हुआ ओएम और फॉन्ट मेट्रिक्स एपीआई इसके अंतर्गत आते हैं।
पहलू अनुपात
मीडिया के आयाम बनाए रखें
आकार
ऊंचाई और चौड़ाई को एक विशेषता में सेट करें
न्यूनतम (), अधिकतम () और क्लैंप ()
किसी भी सीएसएस संपत्ति पर बाधाएं सेट करें
डिस्प्ले:बाहरी भीतरी
बेहतर फिटिंग तत्वों के लिए दो महत्वपूर्ण सिंटैक्स
सूची-शैली-प्रकार
सूचियों में कस्टम शैलियाँ जोड़ें
सीएसएस मॉड्यूल
अब हम स्थानीय या दूरस्थ फ़ाइल से विशिष्ट मॉड्यूल के लिए पूछने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं
सीएसएस क्षेत्र
सामग्री के साथ एक क्षेत्र भरें
CSS सब-ग्रिड
CSS ग्रिड में सूक्ष्म लेआउट के साथ सूक्ष्म लेआउट बनाने में हमारी सहायता करता है।
उदाहरण
निम्नलिखित उदाहरण इनमें से कुछ गुण दिखाते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
उदाहरण
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body> आउटपुट
यह निम्नलिखित परिणाम देगा -
