Karşılaştır ve ComparisonCaption

lang özelliğiyle ilişkilendirilmiş yalnızca bir dil olabilir. Bu, sayfada birden fazla dil olsa bile <html> özelliğinin yalnızca bir dil içerebileceği anlamına gelir. lang değerini sayfanın birincil diline ayarlayın.

Yapılmaması gerekenler:
<html lang="ar,en,fr,pt">...</html>
 Birden fazla dil desteklenmez.
Yapılması gerekenler
<html lang="ar">...</html>
 Yalnızca sayfanın birincil dilini ayarlayın. Bu durumda dil Arapça'dır.

Düğmelere benzer şekilde, bağlantıların erişilebilir adı temel olarak metin içeriklerinden alınır. Bağlantı oluştururken "Buraya" veya "Devamı" gibi doldurma kelimeleri yerine en anlamlı metni bağlantıya eklemek iyi bir fikirdir.

Yeterince açıklayıcı değil
Check out our guide to web performance <a href="/guide">here</a>.
Faydalı içerikler
Check out <a href="/guide">our guide to web performance</a>.

Bir animasyonun düzeni tetikleyip tetiklemediğini kontrol etme

transform dışında bir öğe kullanarak öğeyi hareket ettiren animasyonlar muhtemelen yavaş olur. Aşağıdaki örnekte, top ve left'yi animasyonlu hale getirerek ve transform'yi kullanarak aynı görsel sonucu elde ettim.

Yapılmaması gerekenler:
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}
Yapılması gerekenler
.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

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

Bunu aşağıdaki iki Glitch örneğinde test edebilir ve DevTools'u kullanarak performansı keşfedebilirsiniz.

Aynı işaretlemeyle padding-top: 56.25%'ü aspect-ratio: 16 / 9 ile değiştirebilir ve aspect-ratio'yi width / height oranında ayarlayabiliriz.

padding-top özelliğini kullanma
.container {
  width: 100%;
  padding-top: 56.25%;
}
aspect-ratio özelliğini kullanma
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top yerine aspect-ratio kullanmak çok daha nettir ve dolgu özelliğini normal kapsamının dışında bir şey yapmak için yeniden düzenlemez.

Evet, doğru. Bir dizi vaadi zincirlemek için reduce kullanıyorum. Çok zekiyim. Ancak bu, çok akıllı bir kodlama olduğundan kullanmamanız daha iyidir.

Ancak yukarıdakileri ayarsız bir işleve dönüştürürken çok sıralı bir yaklaşım benimsemek cazip gelebilir:

Önerilmez - çok sıralı
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
 Daha düzenli görünüyor ancak ikinci getirme işlemim, ilk getirme işlemim tamamen okunana kadar başlamaz. Bu, getirme işlemlerini paralel olarak gerçekleştiren promises örneğinden çok daha yavaştır. Neyse ki ideal bir orta yol var.
Önerilen: Güzel ve paralel
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);
  }
}
 Bu örnekte, URL'ler paralel olarak getirilip okunur ancak "akıllı" reduce kısmı standart, sıkıcı ve okunabilir bir for döngüsü ile değiştirilir.

Houdini özel özelliklerini yazma

Aşağıda, özel bir özelliği (CSS değişkeni gibi) ayarlama örneği verilmiştir. Bu örnekte söz dizimi (tür), ilk değer (yedek) ve devralma boole değeri (değeri üst öğesinden devralınıyor mu yoksa değil mi?) yer almaktadır. Bunu yapmanın mevcut yolu JavaScript'te CSS.registerProperty() kullanmaktır ancak Chromium 85 ve sonraki sürümlerde CSS dosyalarınızda @property söz dizimi desteklenecektir:

Ayrı JavaScript dosyası (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
CSS dosyasına dahil edilmiştir (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

Artık --colorPrimary'e diğer tüm CSS özel mülkleri gibi var(--colorPrimary) üzerinden erişebilirsiniz. Ancak buradaki fark, --colorPrimary'ün yalnızca bir dize olarak okunmasıdır. Verileri var.

CSS backdrop-filter, yarı saydam veya şeffaf bir öğeye bir veya daha fazla efekt uygular. Bunu anlamak için aşağıdaki resimleri inceleyin.

Ön plan şeffaflığı yok
Bir dairenin üzerine yerleştirilmiş üçgen. Üçgen içinden daire görülemez. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Ön plan şeffaflığı
Bir dairenin üzerine yerleştirilmiş üçgen. Üçgen saydamdır ve dairenin içinden görünmesine olanak tanır. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Soldaki resimde, backdrop-filter kullanılmamışsa veya desteklenmiyorsa üst üste binen öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde backdrop-filter kullanılarak bulanıklık efekti uygulanmıştır. backdrop-filter'a ek olarak opacity kullanıldığını unutmayın. opacity olmadan bulanıklaştırma uygulanacak bir öğe olmaz. opacity 1 (tamamen opak) olarak ayarlanırsa arka planda hiçbir etkisi olmayacağı neredeyse kesindir.

Ancak unload etkinliğinin aksine, beforeunload'un meşru kullanım alanları vardır. Örneğin, kullanıcıyı sayfadan ayrılırsa kaydedilmemiş değişikliklerini kaybedeceği konusunda uyarmak istediğinizde. Bu durumda, beforeunload dinleyicileri yalnızca bir kullanıcının kaydedilmemiş değişiklikleri olduğunda eklemeniz ve kaydedilmemiş değişiklikler kaydedildikten hemen sonra kaldırmanız önerilir.

Yapılmaması gerekenler:
window.addEventListener('beforeunload', (event) => {
  if (pageHasUnsavedChanges()) {
    event.preventDefault();
    return event.returnValue = 'Are you sure you want to exit?';
  }
});
 Yukarıdaki kod, koşulsuz olarak bir beforeunload dinleyici ekler.
Yapılması gerekenler
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);
});
 Yukarıdaki kod, beforeunload dinleyicisini yalnızca gerektiğinde ekler (ve gerekmediğinde kaldırır).

Cache-Control: no-store kullanımını en aza indirme

Cache-Control: no-store, web sunucularının yanıtlarda ayarlayabileceği ve tarayıcıya yanıtı herhangi bir HTTP önbelleği içinde saklamamasını bildiren bir HTTP üstbilgisidir. Bu, hassas kullanıcı bilgileri içeren kaynaklar (ör. giriş yapılan sayfalar) için kullanılmalıdır.

Her giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasındaki ince çizgi kenarlıkları oluşturmak için gap: 1px öğesini kullanır. Karmaşık kenarlık çözümü yok.

Doldurulmuş boşluk
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
Kenarlık hilesi
.grid {
  display: grid;

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

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

Doğal ızgara kaydırma

En karmaşık düzen, <main> ile <form> arasındaki mantıksal düzen sistemi olan makro düzen oldu.

giriş
<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>
etiket
<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

Her giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasındaki ince çizgi kenarlıkları oluşturmak için gap: 1px öğesini kullanır. Karmaşık kenarlık çözümü yok.

Doldurulmuş boşluk
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
Kenarlık hilesi
.grid {
  display: grid;

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

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

Sekmeler <header> düzeni

Sonraki düzen neredeyse aynı: Dikey sıralama oluşturmak için flex kullanıyorum.

HTML
<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>
CSS
header {
  display: flex;
  flex-direction: column;
}

.snap-indicator, bağlantı grubuyla birlikte yatay olarak hareket etmelidir ve bu başlık düzeni bu aşamayı belirlemeye yardımcı olur. Burada mutlak konumlandırılmış öğe yok.

Hassas esneklik, yalnızca merkezleme odaklı bir stratejidir. place-content: center'ten farklı olarak, merkezleme sırasında çocuk kutularının boyutları değiştirilmediğinden bu yöntem yumuşak ve naziktir. Tüm öğeler mümkün olduğunca nazikçe istiflenir, ortalanır ve aralarında boşluk bırakılır.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Artıları
  • Yalnızca hizalama, yön ve dağıtımı yönetir
  • Düzenlemeler ve bakım işlemleri tek bir yerde
  • Boşluk, n çocuk arasında eşit aralığı garanti eder.
Eksileri
  • Çoğu kod satırı

Hem makro hem de mikro düzenler için idealdir.

Kullanım

gap, değer olarak herhangi bir CSS uzunluk veya yüzde değerini kabul eder.

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


Gap parametresine 1 uzunluk iletilebilir. Bu uzunluk hem satır hem de sütun için kullanılır.

Steno
.grid {
  display: grid;
  gap: 10px;
}
 Satır ve sütunları aynı anda birlikte ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Gap parametresine, satır ve sütun için kullanılacak 2 uzunluk iletilebilir.

Steno
.grid {
  display: grid;
  gap: 10px 5%;
}
 Satır ve sütunları aynı anda ayrı ayrı ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}