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

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

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

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

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

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

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

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

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

इसका इस्तेमाल करने के लिए, मोडल एलिमेंट तय करें. इसके बाद, डायलॉग एलिमेंट पर 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;
}

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

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

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

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);

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

:focus-visible सूडो-क्लास

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

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

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

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

TransformStream इंटरफ़ेस

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

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

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

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

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

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