symbols

構文

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

値

symbols 記述子は、 1 つ以上の <symbol> を空白で区切って指定したリストで指定します。

<symbol>

カウンターシステム内で使用する記号を指定します。リスト内のそれぞれの記号は、<string>、<image>、<custom-ident> のいずれかです。 <image> 値は、<url> または <gradient> として指定することができます。

解説

記号は文字列、画像、識別子の何れかで指定することができます。これは @counter-style アットルールの中で使用されます。

symbols 記述子は、 system 記述子の値が cyclic, numeric, alphabetic, symbolic, fixed の何れかである場合に指定する必要があります。 additive システムを使用する場合は、 symbols を指定する代わりに additive-symbols を使用してください。

引用符で囲まれた記号の間に空白は必須ではありませんが、CSS の可読性を高めることができます。記号として引用符を使用するには、引用符をエスケープするか、 "'" のように別の引用符で囲んでください。

文字列ではなく識別子で記号を定義する場合は、識別子の構文規則を必ず使用してください。例えば、上記で述べたように、* などの ASCII の英字以外の文字は識別子ではないため、引用符で囲んだりエスケープしたりする必要が あります。16 進エスケープ文字の後に空白が続きます。この空白は 2 つの識別子を区切る空白のように見えますが、16 進エスケープ文字の後に数字が続くことを可能にするものです。これは、16 進エスケープされた識別子の後には、次の識別子と区切るために 2 つの空白を記入しなければならないことを意味します。例えば、2 つの空白を含む \2A 1 よりも、文字列 "\2A 1" を使用することをお勧めします。これは、コードツールによって二重の空白が除去される可能性があるためです。エスケープが必要な識別子は、引用符で囲むか、文字列を使用することをお勧めします。

公式定義

形式文法

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

例

カウンター記号の設定

この例では、symbols 記述子の値のリストには、文字 (A、D、E)、引用符で囲まれた数値 ("1")、および文字 Ⓑ に対応する引用符で囲まれた 16 進エスケープ識別子 ("\24B7") が含まれます。

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

結果

仕様書

ブラウザーの互換性

関連情報

• @counter-style 記述子: system, additive-symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• リストスタイルのプロパティ: list-style, list-style-image, list-style-position
• symbols() 関数
• <url> 型
• CSS カウンタースタイルモジュール