Reversed counter-reset
通常は昇順にカウントするCSSカウンターを、reversed() 関数で降順カウンターに変更できます。自動的にリストの総数から逆順に番号を振る動作を実現し、<ol reversed> と同等のCSS機能を提供します。ランキングリストやカウントダウン表示に有用ですが、現在Firefoxでのみサポートされています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.counter-reset.reversed 実験的 | | | 96 | | | |
基本構文
CSS
ol {
counter-reset: reversed(rank);
}
li {
counter-increment: rank -1;
}
li::before {
content: counter(rank) '. ';
}ライブデモ
実務での使いどころ
-
ランキングリストのカウントダウン表示
CSSカウンターを逆順にして、ランキングの順位を自動的に降順で番号付けできます。
注意点
- 現在Firefoxのみのサポートです。他のブラウザではフォールバックとして通常の昇順カウンターまたはHTMLの ol reversed 属性を使用してください。
アクセシビリティ
- リストの順序がスクリーンリーダーに正しく伝わるよう、意味的には <ol reversed> 要素を使用し、CSSカウンターは視覚的な補助として使ってください。