symbols()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
symbols() は CSS の関数で、 list-style などのプロパティの値として、カウンタースタイルをインラインで直接定義することができます。これは、カウンタースタイルを定義する @counter-style メソッドよりも機能は劣りますが、よりシンプルな代替手段です。
再利用可能なカウンタースタイルを定義する @counter-style とは異なり、symbols() は無名です（つまり、1 回しか使用できません）。この関数は、文字列および画像を値として受け入れます。これに対し、@counter-style の symbols 記述子は、識別子も受け入れます。
構文
css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
<symbols-type> は以下のうちの一つで指定することができます。
cyclic: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。numeric: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。alphabetic: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、0がありません。symbolic: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。fixed: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。
形式文法
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
HTML
html
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
CSS
css
ol {
list-style: symbols(cyclic "*" "†" "‡");
}
結果
仕様書
| Specification |
|---|
| CSS Counter Styles Level 3 # symbols-function |
ブラウザーの互換性
Loading…
関連情報
@counter-style記述子:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback- リストスタイルプロパティ:
list-style,list-style-type - CSS カウンタースタイルモジュール
- CSS リストとカウンターモジュール