古き良きol 'HTMLリストについて知っておくべき新しいこと

HTMLリストは、しばしば比較的単調であり、機能が限られていると考えられているため、幅広いアプリケーションを無視することがよくあります。 それでも、タグの削除、注文の反転、カスタムカウンターの作成など、いくつかの古い方法を使用してリストをカスタマイズできます。

ただし、リストを使用する際には、注意が必要な潜在的なリスクを含め、「新しい」知識ポイントもあります。これらのリスクのほとんどは取るに足らないものですが、あなたが思っているよりもはるかに頻繁に発生します。これらのリスク、いくつかの新しいリストの使用、さらには古い方法を改善するためのいくつかの新しいアイデアを探ります。

明確にするために、この記事で説明するHTML要素には次のものがあります。

並べ替え済みリスト

<li>順序付けられていないリスト <li>説明リスト <li> <dl></dl>インタラクティブリスト <li> <menu></menu> ソートされたリスト、順序付けられていないリスト、およびインタラクティブリストにはすべてリスト項目（

）が含まれており、ディスプレイはリストタイプに依存します。注文項目（ <p> </p>）とメニュー要素（<li>）の並べ替え項目の横にあるリスト（<ol></ol>）が表示されます。これらの「リストタグ」を呼び出し、<ul></ul>pseudo-elementを使用してスタイルをスタイルすることもできます。説明リストは、数字や弾丸ではなく、記述用語（<menu></menu>）と説明の詳細（::marker）を使用し、メタデータと語彙を表示するためによく使用されますが、実際のアプリケーションでは一般的ではありません。 <dt></dt> <dd></dd>シンプルな部分から始めましょう。リストスタイルを正しく（少なくとも私の意見では）リセットしてください。その後、いくつかのアクセシビリティの問題を調査してから、とらえどころのない要素に焦点を当てます。これは、実際には一種のリストです！

<menu></menu>リセットリストスタイル

ブラウザは、リストの視覚構造を支援するために独自のユーザーエージェントスタイルを自動的に適用します。これは時々とても便利です！しかし、スタイルのない空白の状態から始めたい場合は、最初にそれらのスタイルをリセットする必要があります。

たとえば、

リスト項目の横にあるマーカーを簡単に削除できます。ここでは新しいものは何もありません：

しかし、最新のCSSは、特定のリストインスタンスを見つけるのに役立つ新しい方法を提供します。マークのすべてのリストをクリアしたいが、これらのリストが長いコンテンツ（記事など）に表示される場合はマークを保持します。新しいCSS擬似クラス関数

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

および

を使用する場合、これらのインスタンスを分離し、これらの場合のタグを許可できます。 :where() :not()なぜ

の代わりに

/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

を使用するのですか？

の特異性は常にゼロですが、:where()はセレクターリストの最も特定の要素の特異性を取ります。したがって、:is()を使用することは、それほど必須ではないカバレッジ方法であり、それ自体で簡単にカバーされます。 where()

UAスタイルは、リスト項目の内容をタグから分離するためにパディングを適用します。これは場合によっては素晴らしいデフォルト効果ですが、上記のようなリストマークアップを削除した場合、パディングもクリアすることもできます。これは、:where()：

の別のユースケースです

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

OK、これにより、マークされていないリスト項目が空間に吊り下げられているように見えません。しかし、私たちは少しやり過ぎで、以前に<article></article>で隔離されたものを含め、すべての場合にパディングを取り外しました。したがって、マーカーを含むこれらのリストは、コンテンツボックスの端の外側に少し掛けられています。

UAスタイルは、<menu></menu>要素に追加の40pxパディングを適用していることに注意してください。したがって、私たちがしなければならないことは、リストマーカーが容器の外に「ぶら下がっている」のを防ぐことです。この問題を解決するには、list-style-position属性を使用できます。

かどうか…たぶんそれはスタイルの好みに依存しますか？

リストの新しいアクセシビリティの問題

残念ながら、現代でも、リスティングにはアクセシビリティの問題がいくつかあります。 1つの問題は、UAスタイルをリセットするときに行ったように、

を適用した結果です。

要するに、Safariは、スクリーンリーダーとのコンテンツをナビゲートするときなど、実際のリストにlist-style: none;を使用する順序付きのリストと順序付けられていないリストを読みません。言い換えれば、タグを削除すると、リストの意味的な意味も削除されます。解決策は、リストにARIAリストの役割を適用し、リスト項目にリスト項目の役割を適用して、スクリーンリーダーがそれらを認識できるようにすることです。

奇妙なことに、Safariはこれをバグではなく機能として扱います。基本的に、ユーザーは、スクリーンリーダーがあまりにも多くのリストを発表したと報告します（開発者はそれらを過剰に使用する傾向があるため）。したがって、実際には、list-style: none;のリストのみがスクリーンリーダーによって発表されることは驚くことではありません。スコット・オハラは、これがすべて詳細に起こったことを説明しています。

/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

2番目のアクセシビリティの問題は、私たちによって引き起こされませんでした（Long Live！）。それで、あなたはタイトルのない要素に

を追加すべきだと知っていましたか？まあ、リストを説明するのに役立つタイトル要素が含まれていないリストについても同じことをすることは理にかなっています。 role="list"

両方の方法を使用する必要は絶対にありません。タイトルまたはARIAタグを使用すると、要件ではなくコンテキストが追加されます。スクリーンリーダーでWebサイトをテストし、現在の状況に最適なユーザーエクスペリエンスを選択してください。 aria-label

関連ニュースで、エリック・ベイリーは、なぜ、どのように考えるかについての記事を書きました

:where(ol, ul, menu) {
  padding-left: 0; /* 或 padding-inline-start */
}

はコードの匂いです。

待って、<menu></menu>もリストですか？

OK、だから、コードの例に挿入してきたすべての要素について疑問に思うかもしれません。これは実際には非常に簡単です。それらは、アクセシビリティツリーに順序付けられていないリストとして表示されます。セマンティックウェブの初期には、メニューは<menu></menu>に似ていると誤って考え、それがコンテキストメニュー（または仕様が呼び出すように「ツールバー」）に使用されると考えました。 （興味がある場合、MDNには<nav></nav>に関連するすべての非推奨コンテンツの興味深い紹介があります。） <menu></menu>今日、これはメニューを使用するセマンティックな方法です：

個人的には、

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

にはいくつかの適切なユースケースがあると思います。最後の例では、タグを持つ

要素に含まれるソーシャル共有ボタンのリストを示しています。共有記事タグが多くのコンテキストに寄与し、ボタンの機能を説明するのに役立つことは注目に値します。メニューは絶対に必要ですか？いいえ。彼らはHTMLマイルストーンですか？絶対にそうではありません。しかし、あなたが<menu></menu>を少なくし、コンポーネントが<menu></menu>を使用して追加のコンテキストを提供できると思うなら、それらはそこにいます。 <div> <code>aria-labelその他？

はい、前述の

（説明リスト）要素がありますが、MDNは他のリストと同じであるとは思わないように見えますが、それは用語のグループリストです。 MDNによると、それらはメタデータ、語彙、およびその他の種類のキー価値ペアに使用する必要があります。すべてのスクリーンリーダーが違った発表を発表するので、私はそれらを避けます。しかし、否定的なコメントで終わらないようにしましょう。リストでできる本当にクールなことをいくつか紹介します：

<dl></dl>

作成ディレクトリの作成

イベントタイムラインを視覚化します<li> リストを水平コンマ分離リストに変換します<li> スタイルタグ（私は個人的にこれが好きではありませんが、それでもかっこいいです）<li>

以上が古き良きol 'HTMLリストについて知っておくべき新しいことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。