वेबसाइट में ज़रूर जोड़ने लायक 3 नए CSS प्रॉपर्टीज़

color-scheme

• वेबसाइट डार्क मोड को सपोर्ट करती हो, फिर भी कभी-कभी scrollbar सफेद और बहुत चमकदार दिखता है
• color-scheme प्रॉपर्टी को dark light पर सेट करने से browser को पता चलता है कि पेज डार्क और लाइट, दोनों मोड संभाल सकता है, और scrollbar भी गहरा हो जाता है
• meta tag का इस्तेमाल करके दस्तावेज़ पर color-scheme लागू किया जा सकता है, जिससे CSS लोड होने से पहले ही browser को उपयोगकर्ता की पसंद का पता चल जाता है
• prefers-color-scheme media feature के साथ इस्तेमाल करने पर उपयोगकर्ता की पसंद के अनुसार क्या बदलना है, इस पर पूरा नियंत्रण मिल सकता है
• :has() selector का उपयोग करके, जब body में dark class हो तब root element पर color-scheme प्रॉपर्टी लागू की जा सकती है

text-wrap

• कभी-कभी शीर्षक या caption में line break अजीब हो जाता है और आखिरी लाइन में सिर्फ एक शब्द रह जाता है
• text-wrap प्रॉपर्टी में balance value का उपयोग करने से वेबसाइट के शीर्षक अधिक संतुलित दिखते हैं
• यह फीचर browser पर निर्भर नहीं है, आधुनिक सेटअप में अच्छी तरह काम करता है और पुराने सेटअप में भी बिना समस्या के graceful degradation देता है

Scroll-margin

• वेबपेज में anchor link इस्तेमाल करते समय fixed header की वजह से target element छिप जाने की समस्या होती है
• scroll-margin CSS प्रॉपर्टी का उपयोग करके scroll-margin-top value को fixed header की ऊंचाई के अनुसार सेट करने पर यह समस्या हल की जा सकती है
• :is selector का उपयोग करके h2, h3, h4 जैसे कई elements पर एक जैसा व्यवहार लागू किया जा सकता है, और ex या lh जैसी units का उपयोग करके dynamic spacing सेट की जा सकती है

[amino014]

यह सच में बहुत काम की टिप है, धन्यवाद

[arfwene]

स्क्रॉलबार अच्छा है

[xguru]

स्क्रॉलबार का सफेद रंग काफ़ी उभरकर दिखता है। GeekNews पर भी मैंने इसे तुरंत dark/light के हिसाब से लागू कर दिया। पता चला कि इसका एक आसान तरीका था।

[kuroneko]

Naver से तुलना करें तो फ़र्क काफ़ी बड़ा है। GeekNews ने वह कर दिखाया जो Naver भी नहीं कर पाया(?)...!