यहां आपके जानने योग्य तथ्य दिए गए हैं:
- सीएसएस हाइलाइट इनहेरिटेंस में बदलाव किया जा रहा है.
<details>
एलिमेंट के लिए ज़्यादा सीएसएस स्टाइल.- पेज मार्जिन बॉक्स की मदद से, प्रिंट लेआउट को आसानी से बनाया जा सकता है.
- और यहां और भी बहुत कुछ है.
मेरी पहचान मारिक कोसाका है. आइए, जानें कि Chrome 131 में डेवलपर के लिए क्या नया है.
सीएसएस हाइलाइट इनहेरिटेंस
::selection
और ::target-text
pseudo-classes के लिए, सीएसएस हाइलाइट इनहेरिटेंस बदल रहा है. इससे स्टाइल इनहेरिटेंस के लिए ज़्यादा आसान मॉडल बनता है. साथ ही, यह हाल ही में जोड़ी गई ::highlight
, ::spelling-error
, और ::grammar-error
स्यूडो-क्लास के साथ अलाइन होता है.
हाइलाइट किए गए टेक्स्ट वाले इस कोड स्निपेट पर विचार करें.
p {
color: deeppink;
}
.blue::selection {
color: blue;
}
<p class="blue">
This is
<em>emphasized</em>
text.
</p>
Chrome के पुराने वर्शन में, हाइलाइट किए गए टेक्स्ट को चुनने पर, टेक्स्ट का रंग नीला नहीं होता था. ऐसा इसलिए होता था, क्योंकि पैरंट पैराग्राफ एलिमेंट पर ::selection
स्यूडो-क्लास सेट की जाती थी.
इसकी वजह यह है कि इसे ओरिजनल एलिमेंट इनहेरिटेंस मॉडल का इस्तेमाल करके लागू किया गया था. इसलिए, इस मामले में ::selection
स्यूडो-क्लास सिर्फ़ उन एलिमेंट से मैच करता है जिनमें ब्लू क्लास है. इस पैराग्राफ़ में मौजूद एलिमेंट में ब्लू क्लास नहीं है.
हाइलाइट इनहेरिटेंस में हुए बदलाव के बाद, Chrome 131 में उसी टेक्स्ट को चुनने पर, टेक्स्ट का रंग नीला हो जाएगा.
इस सुविधा में कुछ और बदलाव भी किए गए हैं. इसलिए, सीएसएस सिलेक्शन स्टाइल के लिए इनहेरिटेंस में हुए बदलाव लेख को ज़रूर पढ़ें. इसे Igalia के स्टीफ़न चेनी ने लिखा है. उन्होंने इस सुविधा पर काम किया है.
<details>
और <summary>
में स्टाइल से जुड़े सुधार
अब आपके पास <details>
और <summary>
एलिमेंट के स्ट्रक्चर को स्टाइल करने के ज़्यादा विकल्प हैं, ताकि आप डिसक्लोज़र या अकॉर्डियन विजेट बना सकें.
इस रिलीज़ में किए गए बदलावों से, display
प्रॉपर्टी का इस्तेमाल करने की सुविधा मिलती है. साथ ही, ::details-content
स्यूडो-एलिमेंट जोड़ा जाता है, ताकि उस हिस्से को स्टाइल किया जा सके जो बड़ा और छोटा हो जाता है.
पहले, details
एलिमेंट के डिसप्ले टाइप को बदला नहीं जा सकता था.
इस पाबंदी को अब हटा दिया गया है. इससे ग्रिड या फ़्लेक्स लेआउट जैसी चीज़ों का इस्तेमाल किया जा सकेगा.
कई details
एलिमेंट से बने इस एक्सक्लूज़िव ऐकॉर्डियन के उदाहरण में, जब किसी details
एलिमेंट को बड़ा किया जाता है, तो उसका कॉन्टेंट summary
के बगल में दिखता है.
ऐसा करने के लिए, details
एलिमेंट पर फ़्लेक्स लेआउट का इस्तेमाल किया जाता है. grid
जैसी अन्य डिसप्ले वैल्यू के साथ ज़्यादा लेआउट पैटर्न भी आज़माया जा सकता है.
ज़्यादा जानकारी के लिए, Bramus का लेख स्टाइल के बारे में ज़्यादा विकल्प <details>
देखें.
@page
मार्जिन बॉक्स
वेब दस्तावेज़ को प्रिंट करते समय या उसे PDF के तौर पर एक्सपोर्ट करते समय, पेज मार्जिन बॉक्स के लिए सहायता जोड़ी गई है.
पेज मार्जिन बॉक्स की मदद से, पेज के मार्जिन वाले हिस्से में कॉन्टेंट तय किया जा सकता है. इसलिए, ब्राउज़र से जनरेट किए गए हेडर और फ़ुटर का इस्तेमाल करने के बजाय, पसंद के मुताबिक हेडर और फ़ुटर दिए जा सकते हैं.
पेज के मार्जिन को सीएसएस में @page
नियम का इस्तेमाल करके तय किया जाता है.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
मार्जिन बॉक्स के दिखने के तरीके और कॉन्टेंट के बारे में, एटी-नियमों में मौजूद सीएसएस प्रॉपर्टी से पता चलता है. ये नियम, जनरेट किए गए कॉन्टेंट का इस्तेमाल करके 16 मार्जिन बॉक्स दिखाते हैं.
पेज नंबर के लिए, मौजूदा पेज नंबर के लिए page
और पेजों की कुल संख्या के लिए pages
के साथ काउंटर भी काम करते हैं.
ज़्यादा जानकारी के लिए, रीचेल का लेख सीएसएस का इस्तेमाल करके प्रिंट करते समय, वेब पेजों के मार्जिन में कॉन्टेंट जोड़ना देखें.
और भी कई सुविधाएं!
और हां, इस काम में और भी बहुत कुछ है.
- 'क्लिप-पाथ', 'फ़िल', 'स्ट्रोक', और 'मार्कर' के लिए, बाहरी SVG संसाधनों के साथ काम करने की सुविधा.
- WebHID, खास वर्कर्स कॉन्टेक्स्ट में चालू होता है.
font-variant-emoji
सीएसएस प्रॉपर्टी की मदद से, इमोजी के व्यवहार को कंट्रोल करें.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 131 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.
- Chrome 131 के लिए रिलीज़ नोट.
- Chrome DevTools (131) में नया क्या है
- Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
- Chrome के रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.
मेरी पहचान मारिको कोसाका है. Chrome 132 रिलीज़ होने के बाद, हम आपको बताएंगे कि Chrome में नया क्या है!