このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

@counter-style”ルール~“fallback”ディスクリプタCSS3で追加

記事Jan. 25th,2022
“@counter-style”ルールで定義するカウンター・スタイルの代替カウンター・スタイルを指定するディスクリプタ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

概要

@ルール @counter-style”ルール
初期値 fallback: decimal;

fallback”ディスクリプタはリスト・アイテムリスト・カウンターの値が@counter-style”ルールで定義されたカウンター・スタイルでは表現することができない場合に代わりに使用する代替のカウンター・スタイルを指定します。

代替のカウンター・スタイルは、例えば、リスト・カウンターの値がrange”ディスクリプタで指定された範囲外にある場合などに使用されます。

fallback”ディスクリプタで指定された代替のカウンター・スタイルが未定義のカウンター・スタイルである場合は“fallback”ディスクリプタの使用値decimalとなります。また、2つのカウンター・スタイルが互いを代替のカウンター・スタイルとして指定していて、ループしてしまう場合にもdecimalとして扱われます。

説明
<counter-style-name> 指定された<counter-style-name>”値で定義されたカウンター・スタイルを代替のカウンター・スタイルとします (定義済みのカウンター・スタイル、もしくは@counter-style”ルールで独自に定義したカウンター・スタイルを使用します。指定された<counter-style>”値が存在しない場合は“decimal”とみなします。)

使用例

ol { list-style-type: sample-counter1;}

@counter-style sample-counter1 {
system: fixed;
symbols: "\1F400" "\1F402" "\1F405" "\1F407" "\1F409" "\1F40D" "\1F40E" "\1F40F" "\1F412" "\1F413" "\1F415" "\1F417";
suffix: "\003A\0020";
fallback: sample-counter2;
}

@counter-style sample-counter2 {
system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";
suffix: "\003A\0020";
}
  1. 東京スカイツリー
  2. 対馬オメガ局送信用鉄塔
  3. 硫黄島ロランC主局(初代)
  4. 硫黄島ロランC主局(2代)
  5. 南鳥島ロランC局(初代)
  6. 東京タワー
  7. NHK川口送信局
  8. あべのハルカス
  9. 明石海峡大橋
  10. 横浜ランドマークタワー
  11. 虎ノ門ヒルズ森タワー
  12. りんくうゲートタワービル
  13. 大阪府咲洲庁舎
  14. おおたかどや山標準電波送信所
  15. 依佐美送信所

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
fallback
定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク