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

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

पब्लिश किया गया: 10 मई, 2023

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

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

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

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 स्यूडो-क्लास

वेब डेवलपर के तौर पर, हम सभी उस "फ़ोकस रिंग" से अच्छी तरह वाकिफ़ हैं जो कीबोर्ड से किसी पेज पर नेविगेट करने या इनपुट एलिमेंट पर क्लिक करने पर दिखती है. यह सुलभता के लिए ज़रूरी सुविधा है. हालांकि, कभी-कभी यह अलग-अलग उपयोगकर्ताओं के लिए विज़ुअल डिज़ाइन में रुकावट बन जाती है. :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 कम्यूनिटी ग्रुप के साथ मिलकर काम करेंगे, ताकि इन बेसलाइन सुविधाओं के बारे में ज़्यादा जानकारी दी जा सके. नए अपडेट के लिए, बेसलाइन पेज देखें.

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

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