बुनियादी सुविधाएं, जिनका इस्तेमाल आज किया जा सकता है

बेसलाइन की कुछ सुविधाओं के बारे में जानें.

Mariko Kosaka
X

वेब को लगातार बेहतर बनाया जा रहा है और डेवलपर को नए टूल उपलब्ध कराने के लिए ब्राउज़र लगातार अपडेट होते रहते हैं. इससे, प्लैटफ़ॉर्म पर नई चीज़ें करने में मदद मिलती है. वे चीज़ें जिन्हें पहले हेल्पर लाइब्रेरी की ज़रूरत होती थी, अब वे वेब प्लैटफ़ॉर्म का हिस्सा बन गई हैं और सभी ब्राउज़र पर काम करती हैं. साथ ही, डिज़ाइन एलिमेंट को कोड करने के छोटे या आसान तरीके भी हैं.

यह लगातार विकास और अनुकूलन उपयोगी होता है, लेकिन इससे भ्रम की स्थिति भी पैदा हो सकती है. इन सभी अपडेट को नेविगेट करना मुश्किल हो सकता है. डेवलपर के रूप में, हमारे पास इस तरह के प्रश्न होते हैं, "सभी ब्राउज़र इंजन इस नई सुविधा का समर्थन कब करेंगे?" "मैं उन सुविधाओं को अपने प्रोडक्शन कोड में कब इस्तेमाल करना शुरू करूं?" "हमें पुराने ब्राउज़र का समर्थन कब तक करना चाहिए?"

सही जवाब है "यह निर्भर करता है". किन चीज़ों की ज़रूरत होती है और किसका इस्तेमाल किया जा सकता है, यह आपके उपयोगकर्ता आधार, टेक्नोलॉजी स्टैक, आपकी टीम के स्ट्रक्चर, और इस्तेमाल किए जा सकने वाले डिवाइसों पर निर्भर करता है. हालांकि, हम सभी इस बात से सहमत हैं कि वेब के मौजूदा हालात की वजह से, इन फ़ैसलों को लेना मुश्किल हो सकता है.

ज़्यादा साफ़ तौर पर जानकारी देने के लिए, Chrome टीम अन्य ब्राउज़र इंजन और वेब कम्यूनिटी के साथ मिलकर काम कर रही है. इसमें Interop 2023 जैसे प्रोजेक्ट पर किया गया हमारा काम भी शामिल है. इससे मुख्य सुविधाओं के सेट के इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) को बेहतर बनाने में मदद मिलती है. हालांकि, पिछले कुछ सालों में लॉन्च हुई सुविधाओं का क्या होगा? क्या दो साल पहले, एक्सपेरिमेंट के तौर पर सीखी गई सुविधाएं इस्तेमाल के लिए तैयार हैं?

इस पोस्ट में, हम कुछ ऐसी सुविधाओं के बारे में बताना चाहते हैं जो पिछले दो मेजर वर्शन के लिए, अब सभी मुख्य ब्राउज़र इंजन के लिए उपलब्ध हैं. यही वजह है कि ज़्यादातर डेवलपर को लगता है कि कोई सुविधा इस्तेमाल करने के लिए सुरक्षित है. इसी सुविधा को हम Baseline नाम दे रहे हैं. ज़्यादा जानकारी के लिए, कृपया यहां बेसलाइन से जुड़ी सूचना देखें.

डायलॉग एलिमेंट

पॉप-अप और मॉडल जैसे डायलॉग प्रॉम्प्ट बनाने के लिए, <dialog> एलिमेंट एक नया एचटीएमएल एलिमेंट है.

ब्राउज़र सहायता

  • Chrome: 37. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 98. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

इसका इस्तेमाल करने के लिए, मॉडल एलिमेंट तय करें. इसके बाद, डायलॉग एलिमेंट पर showModal() तरीके को कॉल करके डायलॉग खोलें. 

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

नेटिव एचटीएमएल एलिमेंट के तौर पर, फ़ोकस मैनेजमेंट, टैब ट्रैकिंग, और स्टैकिंग कॉन्टेक्स्ट को बनाए रखने जैसी सुविधाएं पहले से मौजूद होती हैं. ज़्यादा जानकारी के लिए, डायलॉग कॉम्पोनेंट बनाना लेख पढ़ें.

अलग-अलग सीएसएस ट्रांसफ़ॉर्म प्रॉपर्टी

सीएसएस ट्रांसफ़ॉर्म का इस्तेमाल करना, अपनी साइट पर कन्वर्ज़न बढ़ाने का बेहतरीन तरीका है.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है ऐसा हो सकता है कि आपको एक लाइन में तीन प्रॉपर्टी के साथ सीएसएस ट्रांसफ़ॉर्म लिखने के बारे में जानकारी हो.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी की मदद से, अब ट्रांसफ़ॉर्म प्रॉपर्टी को अलग-अलग तय किया जा सकता है. यह सुविधा, मुश्किल मुख्य-फ़्रेम वाले ऐनिमेशन लिखते समय ज़्यादा काम आती है. 

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

ब्राउज़र सहायता

  • Chrome: 104. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 104. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 72. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 14.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

नई व्यूपोर्ट इकाइयां

मोबाइल पर, व्यूपोर्ट के साइज़ पर डाइनैमिक टूलबार मौजूद होने या न होने का असर पड़ता है.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है कभी-कभी आपको एक URL बार और नेविगेशन टूलबार दिखाई देता है, लेकिन कभी-कभी उन टूलबार को पूरी तरह से वापस ले लिया जाता है.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है व्यूपोर्ट का असल साइज़, इस आधार पर अलग-अलग होगा कि टूलबार दिख रहे हैं या नहीं.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है svh और lvh जैसी व्यूपोर्ट यूनिट से, मोबाइल के लिए डिज़ाइन बनाते समय वेब डेवलपर को ज़्यादा बेहतर कंट्रोल मिलता है. ज़्यादा जानकारी के लिए, बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट लेख पढ़ें.

ब्राउज़र सहायता

  • Chrome: 108. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 108. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 101. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

JavaScript में डीप कॉपी

पहले, ओरिजनल ऑब्जेक्ट के रेफ़रंस के बिना किसी ऑब्जेक्ट की डीप कॉपी बनाने के लिए, JSON.parse के साथ एक लोकप्रिय हैक JSON.stringify को जोड़ा गया था. यह एक आम नुस्खा था कि V8 (Chrome का JavaScript इंजन) ने इस ट्रिक के परफ़ॉर्मेंस में काफ़ी सुधार किया है. हालांकि, अब आपको structuredClone के साथ इस हैक की ज़रूरत नहीं है.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

ब्राउज़र सहायता

  • Chrome: 98. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 98. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 94. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

ज़्यादा जानकारी के लिए, कृपया structuredClone का इस्तेमाल करके JavaScript में डीप-कॉपी करना लेख पढ़ें.

:focus-visible pseudo-class

वेब डेवलपर के तौर पर, हम सभी इस बात से परिचित हैं कि "फ़ोकस रिंग" जो कीबोर्ड से किसी पेज पर नेविगेट करने या इनपुट एलिमेंट पर क्लिक करने पर दिखते हैं. यह सुलभता के लिए एक ज़रूरी सुविधा है, लेकिन कभी-कभी यह अलग-अलग लोगों के लिए विज़ुअल डिज़ाइन के काम में आ जाती है. :focus-visible सीएसएस स्यूडो-क्लास की जांच करती है कि ब्राउज़र को लगता है कि फ़ोकस दिखना चाहिए या नहीं. अब आप सिर्फ़ तब स्टाइल तय कर सकते हैं, जब फ़ोकस दिखना चाहिए. 

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

ब्राउज़र सहायता

  • Chrome: 86. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 86. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 85. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

ज़्यादा जानकारी के लिए, 'सीएसएस जानें' पर फ़ोकस करने वाला सेक्शन देखें.

TransformStream इंटरफ़ेस

Streams API के TransformStream इंटरफ़ेस की मदद से, स्ट्रीम को एक-दूसरे से पिरोया जा सकता है.

उदाहरण के लिए, एक जगह से डेटा स्ट्रीम किया जा सकता है. इसके बाद, डेटा पास होने पर डेटा स्ट्रीम को किसी दूसरी जगह पर कंप्रेस किया जा सकता है. फ़ेच एपीआई की मदद से अनुरोध स्ट्रीम करना लेख में, इस्तेमाल के इस उदाहरण के बारे में बताया गया है.

ब्राउज़र सहायता

  • Chrome: 67. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 102. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 14.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आखिर में खास जानकारी

ऐसी कई सुविधाएं हैं जो हाल ही में वेब प्लैटफ़ॉर्म पर इस्तेमाल करने के लिए इंटरऑपरेबल और स्टेबल हो गई हैं. आने वाले समय में, हम WebDX कम्यूनिटी ग्रुप के साथ काम करेंगे, ताकि इन बेसलाइन सुविधाओं के सेट को ज़्यादा बेहतर तरीके से समझा जा सके. मौजूदा जानकारी के लिए, web.dev/baseline पर जाएं.

अगर आपको अप-टू-डेट रहना है, तो हमारी टीम लेख पब्लिश करती है. जब कोई सुविधा इंटरऑपरेबल होती है. साथ ही, हमारी टीम, एक्सपेरिमेंट के तौर पर शुरू की गई सुविधाओं से लेकर नए इंटरऑपरेबल सुविधा तक, वेब प्लैटफ़ॉर्म पर चल रही गतिविधियों के बारे में हर महीने अपडेट पब्लिश करती है.

हम हमेशा जानना चाहते हैं कि क्या करने से आपको मदद मिलेगी या आपको अलग तरह की मदद चाहिए या नहीं. इसलिए, कृपया WebDX कम्यूनिटी ग्रुप पर हमसे संपर्क करें.