文：マヌエル・マトゥゾヴィッチ、フロントエンドの知恵を代表して 出典：MATUZO
逆順のリストがあるプロジェクトに取り組んでいます。リストは時間の降順でソートされて作成されるのですが、それを意味的にも視覚的にも反映させたいと思っています。ネットで調べてみると、面白い解決策がいくつか見つかりました。
最終的な結果は以下のようなものです。
- C
- B
- A
次に、それを実現する方法を見てみましょう。
HTMLの反転プロパティ
シンプルで最も簡単な解決策は、HTMLのreversed属性です。
<ol reversed>
<li>C</li>
<li>B</li>
<li>A</li>
</ol>
reversed属性はブール値属性で、リストの順序が昇順ではなく降順であることを指定します。
reversed属性はIEを除くほとんどのブラウザでサポートされているので、単に回避したい場合はこれで十分です。
他にどのような実装があるのか気になる方は、続きをお読みください。
HTMLの値属性
もう一つの方法はvalue属性を使うことです：
<ol>
<li value="3">C</li>
<li value="2">B</li>
<li value="1">A</li>
</ol>
この方法はより冗長ですが、例えばリストに対してより多くのコントロールが可能で、次のように操作できます：
<ol>
<li value="6">C</li>
<li value="4">B</li>
<li value="2">A</li>
</ol>
数字を飛ばすとユーザーを混乱させる可能性があるため、このようなことはしない方がよいでしょう。
CSS カスタムカウンタ()
3つ目の方法は、CSSのカウンター計算機を使う方法です。 カウンターの順番を逆にするには、カウンターをゼロ以外の値にリセットすることと、カウンターを負の数だけインクリメントすることの2つです。
<ol>
<li>C</li>
<li>B</li>
<li>A</li>
</ol>
ol {
counter-reset: my-custom-counter 4;
list-style: none;
}
ol li {
counter-increment: my-custom-counter -1;
}
ol li::before {
content: counter(my-custom-counter) ". ";
color: #f23c50;
font-size: 2.5rem;
font-weight: bold;
}
正確なリスト数が分からない場合、カウンタ・リセット属性はHTMLに移すことができます：
<ol style="counter-reset: my-custom-counter {{ items.length + 1 }}">
<li>C</li>
<li>B</li>
<li>A</li>
</ol>
ol {
list-style: none;
}
ol li {
counter-increment: my-custom-counter -1;
}
ol li::before {
content: counter(my-custom-counter) ". "
}
Flexboxや同様のテクニックを使って、CSSでリストの順序を逆にすることを勧める記事もあります。これは、見た目は正しくても、DOMの順序は変わらないので、やってはいけません。CSSで順序を変更しても、DOMの順序には影響しません。
<ol>
<li>C</li>
<li>B</li>
<li>A</li>
</ol>
ol {
display: flex;
flex-direction: column-reverse;
}
ページ上では望ましい結果のように見えますが、F12キーを押してデバッグモードをオンにし、そのDOMの順序をチェックすると、DOMの順序が "CBA "**の代わりに**"ABC "**の順序でリストをレンダリングしていることがわかります。 また、リストをコピーして貼り付けると、ブラウザは元の順番 "ABC "でコピーするかもしれません。
また、StackOverflowで見つけた非常に独創的なソリューションもあります。結果はFlexboxソリューションに似ていますが、欠点もあります。
<ol>
<li>C</li>
<li>B</li>
<li>A</li>
</ol>
ol {
transform: rotate(180deg);
}
ol > li {
transform: rotate(-180deg);
}
もちろん、これは他に方法がないときに自暴自棄になってやったことでしょうし、そんなヘマはしないのが一番です。
それではまた次回。
3社の 才能は、このブログでエラーや提案がある場合は、メッセージを残すために才能を歓迎し、最後に、見ていただきありがとうございます、小誌の最大の力は、共有し続けることです。
コードの展開は、バグがこれらのバグを解決するために、リアルタイムで知ることができない後に存在する可能性があるため、良いバグ監視ツール お勧めする方法で、この側のログデバッグに多くの時間を費やしました。
