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

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

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

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

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

ज़्यादा साफ़ तौर पर जानकारी देने के लिए, 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.stringify को JSON.parse के साथ जोड़ा जाता था. यह एक सामान्य हैक था. इसलिए, 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);

ज़्यादा जानकारी के लिए, कृपया 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;
}

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

TransformStream इंटरफ़ेस

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

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

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

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

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

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