नई CSS प्रॉपर्टीज़ और APIs
डेवलपर्स को JavaScript और CSS के मिश्रण से वेबसाइट कस्टमाइज़ करने में मदद के लिए नई CSS प्रॉपर्टीज़ विकसित की गई हैं जो अब लोकप्रिय ब्राउज़र्स में सपोर्टेड हैं। कुछ नीचे सूचीबद्ध हैं:
focus-within
एलिमेंट्स के भीतर फोकस-एक्सेसिबिलिटी को हल करने का लक्ष्य।
scroll-snap
नेटिव स्क्रॉल और डिसेलेरेशन सक्षम करता है।
@media(prefers-*)
उपयोगकर्ता की डिवाइस प्राथमिकताओं के अनुसार पेज के UI और UX को सेट करने में मदद करता है, जिससे उच्च स्तर का पर्सनलाइज़ेशन संभव होता है। * में light-level, forced-colors, color-scheme, contrast, reduced-motion, reduced-transparency शामिल हो सकते हैं।
position: sticky
UI को व्यूपोर्ट के भीतर रखने के लिए।
लॉजिकल प्रॉपर्टीज़ फॉर स्टैंडर्ड लेआउट
एलिमेंट्स के भीतर और आसपास डायनामिक डायरेक्शनल स्पेसिंग की अनुमति देता है।
gap प्रॉपर्टी
यह प्रॉपर्टी अब फ्लेक्सबॉक्स के लिए उपलब्ध है। gap कंटेनर को स्पेसिंग का मालिक बनाता है बजाय प्रत्येक चाइल्ड एलिमेंट के अपनी स्पेसिंग होने के।
backdrop-filter
किसी एलिमेंट के पीछे की स्टाइल्स को सुविधाजनक तरीके से सेट करने के लिए।
CSS Houdini API
एक लो-लेवल API जो डेवलपर्स को ब्राउज़र को बताने की क्षमता देता है कि वे कस्टम CSS को कैसे पढ़ना और समझना चाहते हैं। CSS Object Model अब डेवलपर्स के लिए अधिक उपयोग योग्य तरीके से सुलभ है। Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM और Font Metrics API इसके अंतर्गत आते हैं।
aspect-ratio
मीडिया के आयाम बनाए रखें।
size
एक एट्रिब्यूट में ऊंचाई और चौड़ाई सेट करें।
min(), max() और clamp()
किसी भी CSS प्रॉपर्टी पर बाधाएं सेट करें।
display: outer inner
बेहतर फिटिंग एलिमेंट्स के लिए दो-मान वाला सिंटैक्स।
list-style-type
लिस्ट्स में कस्टम स्टाइल्स जोड़ें।
CSS मॉड्यूल्स
हम अब JavaScript का उपयोग करके स्थानीय या रिमोट फ़ाइल से एक विशिष्ट मॉड्यूल मांग सकते हैं।
CSS रीजन्स
किसी क्षेत्र को कंटेंट से भरें।
CSS सब-ग्रिड
CSS ग्रिड में माइक्रो लेआउट्स के साथ माइक्रो लेआउट्स बनाने में मदद करता है।
उदाहरण 1: :is() ऑपरेटर
<!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>
आउटपुट
उदाहरण 2: backdrop-filter
<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>
</html>
आउटपुट
