比較と字幕の比較

lang 属性に関連付けることができる言語は 1 つのみです。つまり、ページに複数の言語があっても、<html> 属性で指定できる言語は 1 つのみです。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));
  }
}

次の 2 つの Glitch の例でこれをテストし、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 を使用して一連の Promise を連結しています。私はすごく頭がいい。とはいえ、少々賢いコーディングではなく、

しかし、上記を非同期関数に変換すると、連続的になりがちです。

非推奨 - 連続的すぎる
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
はるかに簡潔に見えますが、最初のフェッチが完全に読み込まれるまで 2 回目のフェッチは開始されません。これは、フェッチを並行して実行する Promise の例よりもはるかに低速です。幸いなことに、理想的な中間環境があります。
推奨 - ナイスかつ並列
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);
  }
}
この例では、URL の取得と読み取りを並行して行いますが、「スマート」な reduce ビットは、標準的な退屈な読み取り可能な for ループに置き換えられています。

Houdini のカスタム プロパティを記述する

ここではカスタム プロパティ（CSS 変数など）の設定例を示しますが、今回は構文（型）、初期値（フォールバック）、継承ブール値（親から値を継承するかどうか）を指定しています。現在、これを行うには JavaScript で CSS.registerProperty() を使用しますが、Chromium 85 以降では、CSS ファイルで @property 構文がサポートされます。

別の JavaScript ファイル（Chromium 78）
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
CSS ファイルに含まれています（Chromium 85）
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

これで、var(--colorPrimary) を介して、他の CSS カスタム プロパティと同様に --colorPrimary にアクセスできるようになりました。ただし、--colorPrimary は単に文字列として読み取られるわけではない点が異なります。データがあるから！

CSS の backdrop-filter は、半透明または透明な要素に 1 つ以上の効果を適用します。この点を理解するために、以下の画像を見てみましょう。

フォアグラウンドの透明度なし
円の上に重ねて表示される三角形。三角形は円が見えません。 
.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 は、ウェブサーバーがレスポンスに設定する HTTP ヘッダーで、HTTP キャッシュに保存しないようにブラウザに指示します。ログインが必要なページなど、機密性の高いユーザー情報を含むリソースに使用します。

各入力グループ（.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> レイアウト

次のレイアウトはほぼ同じで、Flex を使用して垂直方向の順序を作成します。

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 はリンクのグループとともに水平方向に移動する必要があるため、このヘッダー レイアウトはその段階の設定に役立ちます。絶対位置の要素がありません。

Gentle Flex は真のセンターのみの戦略です。place-content: center とは異なり、中央揃えの際に子ボックスのサイズは変更されないため、柔らかく優しくなります。すべての項目をできるだけ丁寧に、中央に配置し、間隔を空けて配置します。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
長所
  • 配置、方向、分布のみを処理する
  • 編集とメンテナンスを 1 か所で管理
  • Gap により n 個の子の間で等間隔が保証されます
デメリット
  • ほとんどのコード行

マクロ レイアウトとミクロ レイアウトの両方に適しています。

使用状況

gap には、任意の CSS の長さまたは割合を値として指定できます。

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


ギャップには 1 つの長さを渡すことができます。これは行と列の両方に使用されます。

省略形
.grid {
  display: grid;
  gap: 10px;
}
行と列の両方を一度に設定する
開きました
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


ギャップには 2 つの長さを渡すことができます。これらは行と列に使用されます。

省略形
.grid {
  display: grid;
  gap: 10px 5%;
}
行と列を別々に同時に設定する
開きました
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}