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> |
<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>
例
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 リストとカウンターモジュール