- 2023 CSS के लिए एक बेहद बड़ा साल रहा। CSS और UI क्षेत्र में कई नई क्षमताएँ आईं, जिन्होंने वेब प्लेटफ़ॉर्म पर पहले असंभव मानी जाने वाली चीज़ों को संभव बनाया
- सभी प्रमुख ब्राउज़र अब container queries, subgrid, और
:has() selector जैसी सुविधाओं को सपोर्ट करते हैं, साथ ही नए color spaces और functions को भी
- Chrome अब केवल CSS के जरिए scroll-based animations और web views के बीच smooth transitions को सपोर्ट करता है
- CSS nesting और scoped styles जैसे कई नए primitives पेश किए गए, जो developer experience को बेहतर बनाते हैं
Architectural foundations
Trigonometric functions
- Chrome 111 ने
sin(), cos(), tan(), asin(), acos(), atan(), atan2() जैसे trigonometric functions को सपोर्ट करना शुरू किया
- ये functions animation और layout दोनों के लिए बहुत उपयोगी हैं
Complex nth-* selection
:nth-child() pseudo-class selector का उपयोग DOM के भीतर elements को index के आधार पर चुनने के लिए किया जा सकता है- Chrome 111 से
:nth-child() और :nth-last-child() में वैकल्पिक रूप से selector list पास की जा सकती है
Scope
- Chrome 118 ने
@scope को सपोर्ट किया, जो document के किसी खास subtree तक selector matching को सीमित करता है
- scoped subtree को scope root और वैकल्पिक scope limit के माध्यम से परिभाषित किया जाता है
Nesting
- nesting के आने से पहले हर selector को अलग-अलग और स्पष्ट रूप से लिखना पड़ता था
- अब संबंधित style rules को group करके selectors का उपयोग आगे भी किया जा सकता है
Subgrid
- CSS
subgrid की मदद से अधिक जटिल grids बनाई जा सकती हैं और child layouts के बीच बेहतर alignment हासिल किया जा सकता है
- यह inner grid को outer grid की rows और columns को अपनाने देता है
Typography
Initial-letter
- Chrome 110 में आया
initial-letter property शुरुआती अक्षर की placement नियंत्रित करने वाला छोटा लेकिन शक्तिशाली CSS फीचर है
- अक्षर को drop cap या raised style में रखा जा सकता है
text-wrap: balance and pretty
- developers को अंतिम आकार, font size, या यहाँ तक कि headline या paragraph की भाषा तक पहले से पता नहीं होती
balance और pretty नाम की दो नई text wrapping techniques पेश की गईं
Color
HD Color Spaces (Color Level 4)
- 2023 में नए colors, अधिक colors, नए color spaces, color functions और नई क्षमताएँ पेश की गईं
- अब CSS और color मिलकर HDR colors के gradients बना सकते हैं और अलग-अलग color spaces में gradients को interpolate कर सकते हैं
color-mix function
- color mixing एक पारंपरिक काम है, और 2023 में यह CSS में भी संभव हो गया
- अब white या black के साथ-साथ transparency को भी colors में mix किया जा सकता है, और यह चुने गए color space में किया जा सकता है
Relative color syntax
- Relative color syntax (RCS),
color-mix() का पूरक तरीका है, जिसका उपयोग color variations बनाने के लिए किया जाता है
- RCS colors पर relative और absolute दोनों तरह की manipulation करने देता है
Responsive Design
Size container queries
- viewport के global size data का उपयोग करने के बजाय, container queries पेज के भीतर parent element को query करने की सुविधा देती हैं
Style container queries
- style queries parent element की custom property values को query करने देती हैं
:has() selector
- लगभग 20 सालों से developers CSS में "parent selector" की मांग कर रहे थे
:has() selector की मदद से .card:has(img.hero) की तरह उस .card element को चुना जा सकता है जिसके child के रूप में hero image हो
Update media query
update media query की मदद से UI को device की refresh rate के अनुसार समायोजित किया जा सकता है
Scripting media query
- scripting media query का उपयोग यह जांचने के लिए किया जा सकता है कि JavaScript उपलब्ध है या नहीं
Reduced-transparency media query
- non-opaque interfaces विभिन्न प्रकार की visual impairments के लिए सिरदर्द पैदा कर सकते हैं या दृश्य रूप से कठिन हो सकते हैं
- यह media query संकेत देती है कि उपयोगकर्ता के पास ऐसा system preference है जो UI में transparency को कम या हटाना चाहता है
Interaction
View transitions
- view transitions पेज के user experience पर बड़ा प्रभाव डालते हैं
- View Transition API की मदद से single-page application के दो page states के बीच visual transition बनाया जा सकता है
Linear-easing function
linear() function जटिल easing functions को सरल तरीके से बनाने देता है, भले ही इसके बदले थोड़ी precision कम हो
Scroll End
scrollend event सही timing पर scroll end event देता है, जिससे यह समझना आसान होता है कि उपयोगकर्ता अभी भी gesture कर रहा है या नहीं
Scroll-driven animations
- scroll-driven animations, scroller के scroll offset को मौजूदा CSS animations या Web Animations API से बनी animations से जोड़ने देती हैं
Deferred timeline attachment
- CSS के जरिए scroll-driven animations लागू करते समय controlling scroller को खोजने का mechanism हमेशा DOM tree में ऊपर की ओर जाता है, इसलिए यह केवल scroll ancestors तक सीमित रहता है
Discrete property animations
- discrete animations, जैसे
display: none से animation करने की क्षमता, 2023 में नई सुविधा के रूप में जोड़ी गई
@starting-style
@starting-style CSS rule, display: none से animation करने वाली नई web capability पर आधारित है
Overlay
- नया CSS
overlay property यह सुनिश्चित करता है कि popover और dialog जैसे top-layer styled elements smoothly top layer से animate होकर दिखाई दें
Components
Popover
- Popover API पेज के बाकी हिस्से के ऊपर दिखाई देने वाले elements बनाने में मदद करता है
Horizontal rules in select
- Chrome और Safari ने इस साल
element के अंदर horizontal rule element ( tag) जोड़ने की क्षमता को सपोर्ट किया
:user-valid and invalid pseudo classes
:user-valid और :user-invalid, :valid और :invalid pseudo-classes की तरह काम करते हैं, लेकिन ये form controls से तभी match करते हैं जब उपयोगकर्ता input के साथ पर्याप्त रूप से interact कर चुका हो
Exclusive accordion
- Chrome 120 ने `` element पर
name attribute को सपोर्ट किया
- इस attribute की मदद से एक ही
name value वाले कई `` elements एक semantic group बना सकते हैं
अभी कोई टिप्पणी नहीं है.