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

भाषा एट्रिब्यूट के साथ सिर्फ़ एक भाषा जुड़ी हो सकती है. इसका मतलब है कि <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 के बजाय किसी अन्य चीज़ का इस्तेमाल करके, एलिमेंट को मूव करने वाले ऐनिमेशन के धीमे होने की संभावना होती है. यहां दिए गए उदाहरण में, मुझे transform का इस्तेमाल करके top और left पर वही विज़ुअल नतीजा मिला है.

यह न करें
.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));
  }
}

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

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

पैडिंग-टॉप का इस्तेमाल करना
.container {
  width: 100%;
  padding-top: 56.25%;
}
आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करना
.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 बिट को एक स्टैंडर्ड, बोरिंग, और आसानी से पढ़े जा सकने वाले डेटा से बदल दिया जाता है.

हौडीनी कस्टम प्रॉपर्टी लिखी जा रही है

यहां कस्टम प्रॉपर्टी (जैसे कि सीएसएस वैरिएबल) सेट करने का उदाहरण दिया गया है. हालांकि, अब इसमें सिंटैक्स (टाइप), शुरुआती वैल्यू (फ़ॉलबैक), और इनहेरिटेंस बूलियन (क्या यह अपने पैरंट से वैल्यू को इनहेरिट करता है या नहीं?) के साथ दिया गया है. फ़िलहाल, 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 को सिर्फ़ स्ट्रिंग के तौर पर नहीं पढ़ा जाता. इसमें डेटा है!

सीएसएस 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-item) वाले fieldset एलिमेंट में 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-item) वाले fieldset एलिमेंट में 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;
}
फ़ायदे
  • सिर्फ़ अलाइनमेंट, डायरेक्शन, और डिस्ट्रिब्यूशन को हैंडल करता है
  • सभी बदलाव और रखरखाव एक ही जगह पर पाएं
  • गैप n बच्चों के बीच बराबर स्पेस की गारंटी देता है
नुकसान
  • कोड की ज़्यादातर लाइनें

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

इस्तेमाल का तरीका

gap, वैल्यू के तौर पर किसी भी सीएसएस length या percentage को स्वीकार करता है.

.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;
}


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

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