Webデザインの進化: @counter-style.fallback で実現する未来のカウンター

CSS の Miscellaneous に関連する @counter-style.fallback のプログラミング解説

概要

用途

@counter-style.fallback は、以下の状況で役立ちます。

• 古いブラウザでカウンタースタイルをサポートしたい場合
• 特定のブラウザでカウンタースタイルが正しく表示されない場合
• より汎用性の高いスタイルシートを作成したい場合

構文

@counter-style.fallback の構文は以下の通りです。

@counter-style <カウンタースタイル名> {
  fallback: <フォールバックカウンタースタイル名>;
}

• <カウンタースタイル名>: フォールバックスタイルを指定するカウンタースタイルの名前
• <フォールバックカウンタースタイル名>: サポートされていないブラウザで使用するカウンタースタイルの名前

例

@counter-style list-item {
  fallback: decimal;
}

@counter-style section {
  fallback: upper-roman;
}

この例では、以下のようになります。

• list-item カウンタースタイルがサポートされていないブラウザでは、decimal カウンタースタイルが使用されます。
• section カウンタースタイルがサポートされていないブラウザでは、upper-roman カウンタースタイルが使用されます。

詳細

@counter-style.fallback について詳しくは、以下のリソースを参照してください。

補足

• @counter-style.fallback は、ブラウザのサポート状況によって動作が異なる場合があります。
• 複数のフォールバックスタイルを指定したい場合は、カンマで区切って指定できます。
• none を指定すると、フォールバックスタイルは適用されません。

いろいろなサンプルコード

リストカウンター

@counter-style list-item {
  fallback: decimal;
  system: cyclic;
  suffix: ". ";
}

ul {
  list-style: list-item;
}

• list-item カウンタースタイルは、サポートされていないブラウザでは decimal カウンタースタイルを使用します。
• リスト項目は、1 から始まる数字で表示されます。
• 各リスト項目の後に、ピリオドとスペースが付加されます。

セクションカウンター

@counter-style section {
  fallback: upper-roman;
  system: alphabetic;
  suffix: ". ";
}

section {
  counter-reset: section;
  counter-increment: section;
  display: block;
}

h1 {
  counter-style: section;
}

このコードは、以下のようになります。

• section カウンタースタイルは、サポートされていないブラウザでは upper-roman カウンタースタイルを使用します。
• セクションは、A から始まるアルファベットで表示されます。
• 各セクションのタイトルの前に、アルファベットとピリオドとスペースが付加されます。

• @counter-style.fallback を使って、より複雑なカウンタースタイルを作成することもできます。
• 例えば、@counter-style.fallback を使って、異なるブラウザで異なるカウンタースタイルを適用することができます。

@counter-style.fallback 以外の方法

counter-style プロパティは、個々の要素にカウンタースタイルを直接指定するために使用できます。

ul li {
  counter-style: decimal;
}

section h1 {
  counter-style: upper-roman;
}

このコードは、以下のようになります。

• ul 要素内の li 要素は、decimal カウンタースタイルで表示されます。
• section 要素内の h1 要素は、upper-roman カウンタースタイルで表示されます。

content プロパティは、カウンターの値を直接要素の内容として表示するために使用できます。

ul li::before {
  content: counter(li, decimal) ". ";
}

section h1::before {
  content: counter(section, upper-roman) ". ";
}

このコードは、以下のようになります。

• ul 要素内の li 要素の前に、1 から始まる数字とピリオドとスペースが表示されます。
• section 要素内の h1 要素の前に、A から始まるアルファベットとピリオドとスペースが表示されます。

JavaScript を使って、カウンターの値を動的に表示することもできます。

const listItems = document.querySelectorAll('ul li');
for (const item of listItems) {
  item.textContent = `${item.dataset.counter}. `;
}

const sectionHeadings = document.querySelectorAll('section h1');
for (const heading of sectionHeadings) {
  heading.textContent = `${heading.dataset.counter}. `;
}

このコードは、以下のようになります。

• ul 要素内の li 要素のテキスト内容を、1 から始まる数字とピリオドとスペースに置き換えます。
• section 要素内の h1 要素のテキスト内容を、A から始まるアルファベットとピリオドとスペースに置き換えます。

• 多くのブラウザでカウンタースタイルがサポートされている場合は、@counter-style.fallback を使うのが最も簡単です。
• 特定の要素にのみフォールバックスタイルを適用したい場合は、counter-style プロパティを使うのが良いでしょう。
• より柔軟なフォールバックスタイルを適用したい場合は、content プロパティまたは JavaScript を使うのが良いでしょう。