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

Rachel Andrew

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

सीएसएस का बेहतर attr() फ़ंक्शन

यह सुविधा, मौजूदा attr() फ़ंक्शन में सीएसएस लेवल 5 में बताई गई सुविधाओं को जोड़ती है. इससे <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 डेवलपर के YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

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