Karşılaştır ve ComparisonCaption

lang özelliği yalnızca bir dille ilişkilendirilebilir. Bu, sayfada birden fazla dil olsa bile <html> özelliğinin yalnızca bir dile sahip olabileceği anlamına gelir. lang dilini 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 örnekte, dil Arapçadır.

Düğmelere benzer şekilde, bağlantılar birincil olarak erişilebilir adlarını metin içeriklerinden alır. Bağlantı oluştururken yararlanabileceğiniz püf noktalarından biri, "Burada" veya "Devamı" gibi dolgu sözcükler yerine en anlamlı metin parçasını bağlantının içine yerleştirmektir.

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

Bir animasyonun düzeni tetikleyip tetiklemediğini kontrol etme

transform dışında bir şey kullanarak öğeleri hareket ettiren animasyonlar büyük olasılıkla yavaş olabilir. Aşağıdaki örnekte, top ve left animasyonlarını kullanıp transform 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 Geliştirici Araçları'nı kullanarak performansı inceleyebilirsiniz.

Aynı işaretlemeyi kullanarak şunları değiştirebiliriz: padding-top: 56.25% değerini aspect-ratio: 16 / 9 ile ayarlayarak aspect-ratio değerini belirtilen width / height oranına ayarlayın.

Dolgu-top kullanma
.container {
  width: 100%;
  padding-top: 56.25%;
}
En boy oranını kullanma
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top yerine aspect-ratio kullanımı çok daha anlaşılırdır ve dolgu özelliğini genel kapsamı dışında bir şey yapacak şekilde elden geçirmez.

Evet, doğru. Bir dizi sözü vermek için reduce kullanıyorum. çok zekiyim. Ancak bu biraz akıllı kodlama sayesinde işinizi kolaylaştırır.

Ancak, yukarıdakileri eşzamansız bir işleve dönüştürürken çok sıralı seçeneği tercih edebilirsiniz:

Önerilmez - çok sıralı
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
Çok daha düzenli görünüyor ancak ilk getirme işlemim tamamen okunana kadar ikinci getirme işlemim başlamıyor. Bu, getirme işlemlerini paralel olarak gerçekleştiren vaat örneğinden çok daha yavaştır. Neyse ki ideal bir orta yol var.
Önerilir - 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 getirilir ve okunur. Ancak "smart"reduce biti standart, sıkıcı, okunabilir bir döngü için değiştirilir.

Houdini özel özellikleri yazma

Aşağıda, özel bir özellik (ör. CSS değişkeni) ayarlama örneği verilmiştir. Ancak artık söz dizimi (tür), başlangıç değeri (yedek) ve devralma boole boole'si (değer üst öğesinden mi devralınır?) ayarlanır. Bunu şu anda JavaScript'te CSS.registerProperty() kullanarak yapabilirsiniz. Ancak Chromium 85 ve sonraki sürümlerde, CSS dosyalarınızda @property söz dizimi desteklenir:

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

Artık diğer tüm CSS özel mülklerinde olduğu gibi var(--colorPrimary) üzerinden --colorPrimary ürününe erişebilirsiniz. Ancak buradaki fark, --colorPrimary metninin yalnızca bir dize olarak okunmamasıdır. Veri de 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
Daire üzerine yerleştirilmiş üçgen. Daire, üçgenin içinden görülemez. 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
Ön plan şeffaflığı
Daire üzerine yerleştirilmiş üçgen. Üçgen yarı saydam olduğu için dairenin içinden görebilirsiniz. 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Soldaki resimde, backdrop-filter kullanılmadığı veya desteklenmediği takdirde çakışan öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde, backdrop-filter kullanarak bulanıklaştırma efekti uygulanıyor. backdrop-filter ile birlikte opacity kullanıldığına dikkat edin. opacity olmadan bulanıklaştırma uygulanmıyordu. opacity özelliği 1 (tamamen opak) olarak ayarlanırsa arka planda herhangi bir etkisi olmayacağını söylemeye gerek yok.

Bununla birlikte, unload etkinliğinden farklı olarak beforeunload için geçerli kullanımlar vardır. Örneğin, kullanıcıyı kaydedilmemiş değişiklikleri olduğu konusunda uyarmak istediğinizde, kullanıcıyı sayfadan ayrılırsa kaybedecekleri konusunda uyarabilirsiniz. Bu durumda, beforeunload işleyicileri yalnızca bir kullanıcıda kaydedilmemiş değişiklikler olduğunda eklemeniz ve ardından kaydedilmemiş değişiklikler kaydedildikten hemen sonra bunları 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 işleyicisi 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 işleyicisini yalnızca gerekli olduğunda ekler (ve gerektirmediğinde kaldırır).

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

Cache-Control: no-store, web sunucularının tarayıcıya yanıtı herhangi bir HTTP önbelleğinde depolamaması talimatını veren yanıtlar üzerinde ayarlanabilen bir HTTP üst bilgisidir. Bu, hassas kullanıcı bilgileri içeren kaynaklar (ör. giriş yapılarak erişilen sayfalar) için kullanılmalıdır.

Her bir giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasında saç çizgisi kenarlıkları oluşturmak için gap: 1px değerini kullanır. Yanıltıcı bir sınır çö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 numarası
.grid {
  display: grid;

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

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

Doğal ızgara sarmalama

En karmaşık düzen, <main> ve <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 bir giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasında saç çizgisi kenarlıkları oluşturmak için gap: 1px değerini kullanır. Yanıltıcı bir sınır çö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 numarası
.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ıdır: Dikey sıralama oluşturmak için flex özelliğini 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 yatay olarak hareket etmelidir. Bu başlık düzeni, sahnenin ayarlanmasına yardımcı olur. Burada mutlak konumlandırılmış öğe yok!

Gentle Flex, yalnızca ortalamaya yönelik daha gerçekçi bir stratejidir. Yumuşak ve naziktir çünkü place-content: center aksine, ortalama sırasında hiçbir çocuk kutusu boyutu değiştirilmez. Tüm öğeler üst üste yığılmış, ortalanmış ve aralıklı olarak mümkün olduğunca nazik davranın.

.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üzenleme ve bakım işlemlerinin tümü tek bir yerde
  • Boşluk, n alt öğe arasında eşit boşluğu garanti eder
Eksileri
  • Çoğu kod satırı

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

Kullanım

gap, herhangi bir CSS uzunluğu veya yüzdesini değer olarak kabul eder.

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


Boşluk, hem satır hem de sütun için kullanılacak olan 1 uzunlukta iletilebilir.

Steno
.grid {
  display: grid;
  gap: 10px;
}
Hem satırları hem de sütunları aynı anda bir araya ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Boşluk, satır ve sütun için kullanılacak olan 2 uzunluk geçirilebilir.

Steno
.grid {
  display: grid;
  gap: 10px 5%;
}
Hem satırları hem de sütunları aynı anda ayrı olarak ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}