詳細要素のスタイリングとそれらを解決する方法の2つの問題

以前は、単純な拡張可能なコンテンツブロックを作成するには、JavaScriptまたは複雑なCSS回避策が必要でした。 HTMLを変更することも面倒になる可能性があります。今、<details></details>そして<summary></summary>要素（「開示ウィジェット」の形成）がこれを大幅に簡素化します。たとえば、FAQのために職場で広く使用しています。

一般的なスタイリングの課題に対処します

その間<details></details>そして<summary></summary>本質的に拡張/崩壊機能を提供しますが、最適なプレゼンテーションにはCSSが必要になる場合があります。スタイリングがなければ、2つの重要な問題が発生します。

第1号：<summary></summary>カーソル

<summary></summary>要素は、インタラクティブである間、予想されるポインターの代わりにテキスト選択カーソルにデフォルトです。

第2号：ネストされたブロック要素<summary></summary>

内部内のブロックレベルの要素（見出しなど）<summary></summary>インラインではなく、矢の下に表示されます。

CSSソリューション

これらを解決するには、これらのスタイルをCSSリセットに追加します。

詳細概要{
  カーソル：ポインター;
}

詳細概要> * {
  表示：インライン;
}

各問題とその解決策を詳細に調べましょう。

カスタマイズ<summary></summary>カーソル

カーソルは、意図した相互作用を視覚的に反映する必要があります。デフォルトのテキストカーソルオン<summary></summary>要素は、技術的には正しいが（テキストは選択可能）、ポインターよりも直感的ではない。

解決策は簡単です：

詳細概要{
  カーソル：ポインター;
}

MDN Web DocsやGitHubを含む多くの著名なWebサイトは、すでにこのスタイルを開示ウィジェットに使用しています。デフォルトのcursor: text 、概要テキストの選択性を反映している可能性がありますが、インタラクティブな要素にはポインターが一般的に望ましいです。カーソルを変更すると、視覚的な外観にのみ影響することに注意してください。選択性は変更されていません。

ネストされた表示<summary></summary>コンテンツインライン

FAQの場合、私はしばしば見出しに質問を包みます（例えば、<h3></h3> ） 内で<summary></summary>：

<details><summary><h3 id="私の子供の-計画は実装されますか">私の子供の504計画は実装されますか？</h3></summary><p>はい。春と同様に、ケースマネージャーは学生に手を差し伸べます。</p></details>

これはいくつかの利点を提供します：

• 一貫したスタイリング：他の見出しとの視覚的な一貫性を維持します。
• IE/EdgeHTML互換性：サポートしていない古いブラウザにフォールバックを提供します<details></details>。
• アクセシビリティ： AIDS Assistive Technology Navigation（以下で説明するように、画面読者による解釈は異なる場合があります）。

見出しとボタン

<summary></summary>要素はボタンのように動作します（暗黙的にrole=buttonを持っています）が、ボタンとは異なり、ネストされた見出しが可能になります。これは競合を生み出します：

• 見出しはナビゲーションを助けます。
• ボタンは通常、ネストされた要素からセマンティクスを剥ぎ取ります。

スクリーンリーダーの互換性はここで一貫性がありません。 NVDAとナレーションは、内部の見出しを認識します<summary></summary>、しかし、顎はそうではありません。したがって、内部のスタイリング見出し中<summary></summary>可能であり、彼らの意味的な解釈は保証されていません。

インラインスタイリング

矢印が見出しの上に表示されないようにするには、内部に直接ネストされた要素のインラインスタイリングを使用します<summary></summary>：

詳細概要> * {
  表示：インライン;
}

inline-blockではなくinlineを使用して、問題の包装を避けます。 display: flex onを使用したいと思っています<summary></summary>、これは矢を隠します。

ボーナス：インターネットエクスプローラースタイルを除く

IE以降のエッジバージョンはサポートしていないためです<details></details>、機能クエリを使用して、カスタムスタイルを適用しないでください。

 @supports not（-ms-ime-align：auto）{
  詳細概要{
    カーソル：ポインター;
  }
  詳細概要> * {
    表示：インライン;
  }
  /* 他の<details>/<summary> スタイル */
}</summary></details>

IEはこのブロックを完全に無視します。 EdgeHTMLは-ms-ime-alignチェックのためにも無視します。非常に古いChromeおよびSafariバージョン（市場シェアが無視できる）には、機能クエリのサポートもないことに注意してください。 @supports (details)ブロックは理想的ですが、ブラウザのサポートがさらに少ないです。

結論

正しいHTML構造とこれらのCSSスタイルを使用すると、開示ウィジェットを簡単にカスタマイズできます。スタイリング中にそれを覚えておいてください<summary></summary>要素は簡単で、画面リーダーのネストされた見出しの互換性が考慮する必要があります。

以上が詳細要素のスタイリングとそれらを解決する方法の2つの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。