Chrome 131 में नई सुविधाएं

Mariko Kosaka
X

यहां आपके जानने योग्य तथ्य दिए गए हैं:

मेरी पहचान मारिक कोसाका है. आइए, जानें कि Chrome 131 में डेवलपर के लिए क्या नया है.

सीएसएस हाइलाइट इनहेरिटेंस

::selection और ::target-text सूडो-क्लास के लिए, सीएसएस हाइलाइट इनहेरिटेंस बदल रहा है. इससे स्टाइल इनहेरिटेंस के लिए ज़्यादा आसान मॉडल बनता है. साथ ही, यह हाल ही में जोड़ी गई ::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 के बगल में दिखता है.

Flex लेआउट वाला अकॉर्डियन विजेट

ऐसा करने के लिए, details एलिमेंट पर फ़्लेक्स लेआउट का इस्तेमाल करें. grid जैसी अन्य डिसप्ले वैल्यू के साथ, ज़्यादा लेआउट पैटर्न आज़माए जा सकते हैं.

ज़्यादा जानकारी के लिए, Bramus का लेख <details> को स्टाइल करने के ज़्यादा विकल्प देखें.

@page मार्जिन बॉक्स

वेब दस्तावेज़ को प्रिंट करते समय या उसे PDF के तौर पर एक्सपोर्ट करते समय, पेज मार्जिन बॉक्स के लिए सहायता जोड़ी गई है.

पेज मार्जिन बॉक्स की मदद से, पेज के मार्जिन वाले हिस्से में कॉन्टेंट तय किया जा सकता है. इसलिए, ब्राउज़र से जनरेट किए गए हेडर और फ़ुटर का इस्तेमाल करने के बजाय, पसंद के मुताबिक हेडर और फ़ुटर दिए जा सकते हैं.

पेज के मार्जिन को सीएसएस में @page नियम का इस्तेमाल करके तय किया जाता है.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

मार्जिन बॉक्स के दिखने के तरीके और कॉन्टेंट के बारे में, एटी-नियमों में मौजूद सीएसएस प्रॉपर्टी से पता चलता है. ये नियम, जनरेट किए गए कॉन्टेंट का इस्तेमाल करके 16 मार्जिन बॉक्स दिखाते हैं.

पेज नंबर के लिए, मौजूदा पेज नंबर के लिए page और पेजों की कुल संख्या के लिए pages के साथ काउंटर भी काम करते हैं.

ज़्यादा जानकारी के लिए, रीचेल का लेख सीएसएस का इस्तेमाल करके प्रिंट करते समय, वेब पेजों के मार्जिन में कॉन्टेंट जोड़ना देखें.

और भी कई सुविधाएं!

इसके अलावा, और भी बहुत कुछ है.

  • 'clip-path', 'fill', 'stroke', और 'marker' के लिए, बाहरी SVG रिसॉर्स के साथ काम करने की सुविधा.
  • WebHID, खास वर्कर्स कॉन्टेक्स्ट में चालू होता है.
  • font-variant-emoji सीएसएस प्रॉपर्टी की मदद से, इमोजी के व्यवहार को कंट्रोल करें.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 131 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

मेरी पहचान मारिको कोसाका है. Chrome 132 रिलीज़ होने के बाद, हम आपको बताएंगे कि Chrome में नया क्या है!