कैप्शन की तुलना करें और तुलना करें

lang एट्रिब्यूट में सिर्फ़ एक भाषा हो सकती है. इसका मतलब है कि <html> एट्रिब्यूट में सिर्फ़ एक भाषा हो सकती है. भले ही, पेज पर एक से ज़्यादा भाषाएं हों. lang को पेज की मुख्य भाषा पर सेट करें.

यह न करें
<html lang="ar,en,fr,pt">...</html>
 एक से ज़्यादा भाषाओं का इस्तेमाल नहीं किया जा सकता.
यह करें
<html lang="ar">...</html>
 सिर्फ़ पेज की मुख्य भाषा सेट करें. इस मामले में, भाषा ऐरेबिक है.

बटन की तरह ही, लिंक का सुलभता नाम मुख्य रूप से उनके टेक्स्ट कॉन्टेंट से मिलता है. लिंक बनाते समय, "यहां" या "ज़्यादा पढ़ें" जैसे फ़िलर शब्दों के बजाय, लिंक में सबसे ज़्यादा काम का टेक्स्ट डालना एक अच्छी तरकीब है.

ज़रूरत के मुताबिक जानकारी नहीं है
Check out our guide to web performance <a href="/guide">here</a>.
काम का कॉन्टेंट!
Check out <a href="/guide">our guide to web performance</a>.

यह देखना कि कोई ऐनिमेशन लेआउट को ट्रिगर करता है या नहीं

transform के अलावा किसी और चीज़ का इस्तेमाल करके, एलिमेंट को मूव करने वाले ऐनिमेशन का चलना धीमा हो सकता है. नीचे दिए गए उदाहरण में, मैंने top और left को ऐनिमेट करके और transform का इस्तेमाल करके, एक ही विज़ुअल नतीजा हासिल किया है.

यह न करें
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}
यह करें
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

इसकी जांच करने के लिए, यहां दिए गए Glitch के दो उदाहरण देखें. साथ ही, DevTools का इस्तेमाल करके परफ़ॉर्मेंस के बारे में जानें.

एक ही मार्कअप का इस्तेमाल करके, हम padding-top: 56.25% को aspect-ratio: 16 / 9 से बदल सकते हैं. साथ ही, aspect-ratio को width / height के तय अनुपात पर सेट कर सकते हैं.

padding-top का इस्तेमाल करना
.container {
  width: 100%;
  padding-top: 56.25%;
}
aspect-ratio का इस्तेमाल करना
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top के बजाय aspect-ratio का इस्तेमाल करना ज़्यादा बेहतर है. इससे पैडिंग प्रॉपर्टी को उसके सामान्य दायरे से बाहर कुछ करने के लिए, पूरी तरह से बदलने की ज़रूरत नहीं पड़ती.

हां, यह सही है. मैं reduce का इस्तेमाल करके, एक से ज़्यादा वादे करने के लिए चेन बना रहा/रही हूं. मैं बहुत चतुर हूं. हालांकि, यह बहुत स्मार्ट कोडिंग है, जिसे इस्तेमाल करने से बचना चाहिए.

हालांकि, ऊपर दिए गए फ़ंक्शन को असाइन फ़ंक्शन में बदलते समय, बहुत क्रम से काम करने का मन करता है:

सुझाया नहीं जाता - बहुत क्रम से
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
 यह तरीका ज़्यादा बेहतर लगता है. हालांकि, मेरा दूसरा फ़ेच तब तक शुरू नहीं होता, जब तक मेरा पहला फ़ेच पूरी तरह से पढ़ा नहीं जाता. यह, एक साथ फ़ेच करने वाले प्रॉमिस के उदाहरण के मुकाबले काफ़ी धीमा है. शुक्र है कि इसके बीच में एक सही विकल्प है.
सुझाया गया - अच्छा और पैरलल
function markHandled(...promises) {
  Promise.allSettled(promises);
}

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async (url) => {
    const response = await fetch(url);
    return response.text();
  });

  markHandled(...textPromises);

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
 इस उदाहरण में, यूआरएल एक साथ फ़ेच और पढ़े जाते हैं. हालांकि, "स्मार्ट" reduce बिट को स्टैंडर्ड, बोरिंग, और पढ़ने लायक for-loop से बदल दिया गया है.

Houdini कस्टम प्रॉपर्टी लिखना

यहां कस्टम प्रॉपर्टी (सीएसएस वैरिएबल) सेट करने का उदाहरण दिया गया है. हालांकि, अब इसमें सिंटैक्स (टाइप), शुरुआती वैल्यू (फ़ॉलबैक), और इनहेरिटेंस बूलियन (क्या यह अपने पैरंट से वैल्यू इनहेरिट करता है या नहीं?) है. फ़िलहाल, ऐसा करने के लिए JavaScript में CSS.registerProperty() का इस्तेमाल किया जाता है. हालांकि, Chromium 85 और उसके बाद के वर्शन में, आपकी सीएसएस फ़ाइलों में @property सिंटैक्स का इस्तेमाल किया जा सकेगा:

अलग JavaScript फ़ाइल (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
सीएसएस फ़ाइल में शामिल है (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

अब --colorPrimary को किसी भी अन्य सीएसएस कस्टम प्रॉपर्टी की तरह, var(--colorPrimary) के ज़रिए ऐक्सेस किया जा सकता है. हालांकि, यहां फ़र्क़ यह है कि --colorPrimary को सिर्फ़ स्ट्रिंग के तौर पर नहीं पढ़ा जाता. इसमें डेटा है!

CSS backdrop-filter, पारदर्शी या पारभासी एलिमेंट पर एक या उससे ज़्यादा इफ़ेक्ट लागू करता है. इसे समझने के लिए, नीचे दी गई इमेज देखें.

फ़ोरग्राउंड में पारदर्शिता न हो
एक वृत्त पर बना त्रिभुज. सर्कल को ट्रैंगल से नहीं देखा जा सकता. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
फ़ोरग्राउंड की पारदर्शिता
एक त्रिभुज, जो किसी वृत्त पर बना हुआ है. ट्रायएंगल पारदर्शी होता है, ताकि सर्कल को इसके ज़रिए देखा जा सके. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

बाईं ओर दी गई इमेज से पता चलता है कि backdrop-filter का इस्तेमाल न करने या काम न करने पर, ओवरलैप होने वाले एलिमेंट कैसे रेंडर किए जाएंगे. दाईं ओर दी गई इमेज में, backdrop-filter का इस्तेमाल करके धुंधला करने वाला इफ़ेक्ट लागू किया गया है. ध्यान दें कि इसमें backdrop-filter के साथ-साथ opacity का भी इस्तेमाल किया गया है. opacity के बिना, धुंधला करने की सुविधा लागू नहीं की जा सकती. यह बताने की ज़रूरत नहीं है कि अगर opacity को 1 (पूरी तरह से अपारदर्शी) पर सेट किया जाता है, तो बैकग्राउंड पर कोई असर नहीं पड़ेगा.

हालांकि, unload इवेंट के उलट, beforeunload का इस्तेमाल सही तरीके से किया जा सकता है. उदाहरण के लिए, जब आपको उपयोगकर्ता को चेतावनी देनी हो कि पेज छोड़ने पर, सेव नहीं किए गए बदलाव मिट जाएंगे. इस मामले में, हमारा सुझाव है कि आप beforeunload दर्शकों को सिर्फ़ तब जोड़ें, जब उपयोगकर्ता ने सेव नहीं किए गए बदलाव किए हों. इसके बाद, सेव नहीं किए गए बदलावों को सेव करने के तुरंत बाद उन्हें हटा दें.

यह न करें
window.addEventListener('beforeunload', (event) => {
  if (pageHasUnsavedChanges()) {
    event.preventDefault();
    return event.returnValue = 'Are you sure you want to exit?';
  }
});
 ऊपर दिया गया कोड, beforeunload दर्शक को बिना किसी शर्त के जोड़ता है.
यह करें
function beforeUnloadListener(event) {
  event.preventDefault();
  return event.returnValue = 'Are you sure you want to exit?';
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  window.addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  window.removeEventListener('beforeunload', beforeUnloadListener);
});
 ऊपर दिया गया कोड, beforeunload लिसनर को सिर्फ़ तब जोड़ता है, जब ज़रूरत होती है. साथ ही, ज़रूरत न होने पर उसे हटा देता है.

Cache-Control: no-store का इस्तेमाल कम से कम करना

Cache-Control: no-store एक एचटीटीपी हेडर है. वेब सर्वर, रिस्पॉन्स पर इसे सेट कर सकते हैं. इससे ब्राउज़र को यह निर्देश मिलता है कि वह रिस्पॉन्स को किसी भी एचटीटीपी कैश में सेव न करे. इसका इस्तेमाल, उपयोगकर्ता की संवेदनशील जानकारी वाले संसाधनों के लिए किया जाना चाहिए. उदाहरण के लिए, लॉगिन करने के बाद दिखने वाले पेज.

fieldset एलिमेंट में हर इनपुट ग्रुप (.fieldset-item) होता है. यह एलिमेंट, एलिमेंट के बीच में हेयरलाइन बॉर्डर बनाने के लिए gap: 1px का इस्तेमाल करता है. बॉर्डर के लिए कोई मुश्किल समाधान नहीं!

भरा हुआ गैप
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
बॉर्डर ट्रिक
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

ग्रिड को अपने-आप रैप होना

सबसे जटिल लेआउट, मैक्रो लेआउट था. यह <main> और <form> के बीच का लॉजिकल लेआउट सिस्टम था.

इनपुट
<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>
लेबल
<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

fieldset एलिमेंट में हर इनपुट ग्रुप (.fieldset-item) होता है. यह एलिमेंट, एलिमेंट के बीच में हेयरलाइन बॉर्डर बनाने के लिए gap: 1px का इस्तेमाल करता है. बॉर्डर के लिए कोई मुश्किल समाधान नहीं!

भरा हुआ गैप
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
बॉर्डर ट्रिक
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

टैब <header> लेआउट

अगला लेआउट भी लगभग एक जैसा है: वर्टिकल क्रम बनाने के लिए, मैं फ़्लेक्स का इस्तेमाल करता/करती हूं.

एचटीएमएल
<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>
सीएसएस
header {
  display: flex;
  flex-direction: column;
}

.snap-indicator को लिंक के ग्रुप के साथ हॉरिज़ॉन्टल तौर पर ट्रैवल करना चाहिए. साथ ही, यह हेडर लेआउट उस स्टेज को सेट करने में मदद करता है. यहां कोई एलिमेंट, एब्सोलूट पोज़िशन में नहीं है!

Gentle Flex, सिर्फ़ केंद्रित करने वाली रणनीति है. यह सॉफ़्ट और आसान है, क्योंकि place-content: center के उलट, केंद्रित करने के दौरान बच्चों के बॉक्स के साइज़ में कोई बदलाव नहीं होता. सभी आइटम को धीरे से स्टैक किया जाता है, बीच में रखा जाता है, और उनके बीच स्पेस दिया जाता है.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
फ़ायदे
  • सिर्फ़ अलाइनमेंट, डायरेक्शन, और डिस्ट्रिब्यूशन को मैनेज करता है
  • बदलाव और रखरखाव की सुविधाएं एक ही जगह पर उपलब्ध हैं
  • Gap की मदद से, n बच्चों के बीच बराबर स्पेस बनाए रखने की गारंटी मिलती है
नुकसान
  • कोड की ज़्यादा से ज़्यादा लाइनें

यह मैक्रो और माइक्रो लेआउट, दोनों के लिए बेहतरीन है.

इस्तेमाल

gap, वैल्यू के तौर पर किसी भी CSS लंबाई या प्रतिशत को स्वीकार करता है.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


गैप के लिए एक लंबाई दी जा सकती है. इसका इस्तेमाल, पंक्ति और कॉलम, दोनों के लिए किया जाएगा.

शॉर्टहैंड
.grid {
  display: grid;
  gap: 10px;
}
 पंक्तियों और कॉलम, दोनों को एक साथ एक साथ सेट करें
बड़ा किया गया
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Gap फ़ंक्शन में दो वैल्यू दी जा सकती हैं. इनका इस्तेमाल पंक्ति और कॉलम के लिए किया जाएगा.

शॉर्टहैंड
.grid {
  display: grid;
  gap: 10px 5%;
}
 पंक्तियों और कॉलम, दोनों को एक साथ अलग-अलग सेट करें
बड़ा किया गया
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}