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

Rachel Andrew

यहां कुछ ज़रूरी जानकारी दी गई है:

सीएसएस का ऐडवांस attr() फ़ंक्शन

यह सुविधा, सीएसएस लेवल 5 में बताई गई सुविधाओं को मौजूदा attr() फ़ंक्शन में जोड़ती है. इससे, <string> के अलावा अन्य टाइप का इस्तेमाल किया जा सकता है. साथ ही, इसका इस्तेमाल सभी सीएसएस प्रॉपर्टी में किया जा सकता है. इसके अलावा, इसका इस्तेमाल स्यूडो-एलिमेंट कॉन्टेंट के लिए भी किया जा सकता है.

यहां दिए गए उदाहरण में, div के लिए color प्रॉपर्टी की वैल्यू, data-color एट्रिब्यूट की वैल्यू का इस्तेमाल करती है. इस एट्रिब्यूट की वैल्यू को attr() और type() का इस्तेमाल करके, <color> में पार्स किया जाता है. फ़ॉलबैक वैल्यू को red पर सेट किया जाता है.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

सीएसएस attr() को अपग्रेड किया गया लेख में इसके बारे में ज़्यादा जानें.

सीएसएस स्क्रोल स्टेट कंटेनर क्वेरी

कंटेनर क्वेरी का इस्तेमाल करके, कंटेनर के डिसेंडेंट को उनकी स्क्रोल की स्थिति के आधार पर स्टाइल करें.

क्वेरी कंटेनर, स्क्रोल कंटेनर होता है या स्क्रोल कंटेनर की स्क्रोल पोज़िशन से प्रभावित होने वाला कोई एलिमेंट होता है. इन स्थितियों के बारे में क्वेरी की जा सकती है:

  • stuck: स्टिकी पोज़िशन वाला कंटेनर, स्क्रोल बॉक्स के किसी एक किनारे पर चिपका होता है.
  • snapped: स्क्रोल स्नैप अलाइन किए गए कंटेनर को फ़िलहाल हॉरिज़ॉन्टल या वर्टिकल तरीके से स्नैप किया गया है.
  • scrollable: इससे यह पता चलता है कि स्क्रोल कंटेनर को क्वेरी की गई दिशा में स्क्रोल किया जा सकता है या नहीं.

नया कंटेनर टाइप: scroll-state की मदद से कंटेनर के बारे में क्वेरी की जा सकती है. उदाहरण के लिए:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

सीएसएस स्क्रोल स्टेट क्वेरी में जाकर, इसके बारे में ज़्यादा जानें और कुछ डेमो देखें.

सीएसएस text-box, text-box-trim, और text-box-edge

text-box-trim प्रॉपर्टी से यह तय होता है कि इमेज को ऊपर या नीचे से कितना काटा जाए. वहीं, text-box-edge प्रॉपर्टी से यह तय होता है कि इमेज के किनारे को कैसे काटा जाए.

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

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

सीएसएस text-box-trim में इन नई प्रॉपर्टी का इस्तेमाल करने का तरीका जानें.

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

बेशक, इसके अलावा और भी कई तरीके हैं.

  • Animation.overallProgressसे आपको यह आसानी से पता चलता है कि ऐनिमेशन कितना आगे बढ़ गया है. इससे कोई फ़र्क़ नहीं पड़ता कि टाइमलाइन कैसी है.
  • Node.prototype.moveBefore की मदद से, एलिमेंट की स्थिति को रीसेट किए बिना, उन्हें DOM ट्री में इधर-उधर ले जाया जा सकता है.
  • FileSystemObserver इंटरफ़ेस, वेबसाइटों को फ़ाइल सिस्टम में हुए बदलावों के बारे में सूचना देता है.
  • PublicKeyCredential getClientCapabilities() तरीके से यह पता लगाया जा सकता है कि उपयोगकर्ता के क्लाइंट पर WebAuthn की कौनसी सुविधाएं काम करती हैं.

इन और Chrome की कई अन्य नई सुविधाओं के बारे में जानने के लिए, Chrome 133 के रिलीज़ नोट देखें!

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

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

सदस्यता लें

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

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