ロブ・オリアリー著✏️
<概要> HTML 要素は開示ウィジェットと総称されますが、スタイルを設定するのは簡単ではありません。制限があるため、カスタム コンポーネントを使用して独自のバージョンを作成することがよくあります。ただし、CSS が進化するにつれて、これらの要素はカスタマイズしやすくなりました。この記事では、開示ウィジェットの外観と動作をカスタマイズする方法について説明します。
は、追加情報が非表示になる開示ウィジェットを作成する HTML 要素です。開示ウィジェットは通常、何らかのテキストを伴う三角形のマーカーとして表示されます。
ユーザーがウィジェットをクリックするか、ウィジェットに焦点を当ててスペースバーを押すと、ウィジェットが開き、追加情報が表示されます。三角形のマーカーは下向きで、開いた状態であることを示します:
開示ウィジェットには常に表示されるラベルがあり、
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
要素は、デフォルトのスタイルに display: list-item が含まれているため、[
開示ウィジェットには、その構成部分をスタイルするための 2 つの疑似要素があります。
次のセクションでは、公開ウィジェットをカスタマイズするための、あまり知られていない新しい方法をいくつか紹介します。
開示ウィジェットを開くと、即座に開きます。瞬きすると見逃してしまいますよ！
ユーザーのアクションの影響を示すために、より段階的な方法で 1 つの状態から別の状態に移行することが望ましいです。開示ウィジェットの開閉アクションに遷移アニメーションを追加できますか?要するに、そうです！
これをアニメーション化するには、非表示のコンテンツの高さを 0 から最終的な高さに遷移させる必要があります。 height プロパティのデフォルト値は auto で、コンテンツに基づいて高さを計算するのはブラウザーに任せられます。 [interpolate-size](https://nerdy.dev/interpolate-size) プロパティが追加されるまで、CSS では auto の値にアニメーション化することはできませんでした。ブラウザーのサポートは、使用する必要がある新しい CSS 機能 (主に interpolate-size と ::details-content) に対して少し制限されていますが、これは漸進的な機能強化の好例です。現在は Chrome で動作します。
これは CodePen のアニメーションの例です。
まず、interpolate-size を追加して、auto の高さに移行できるようにします。
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
次に、クローズドスタイルについて説明します。 「追加情報」コンテンツの高さをゼロにし、コンテンツが表示されないようにしたい、つまり、オーバーフローを防ぎたいと考えています。
::details-content 擬似要素を使用して、非表示のコンテンツをターゲットにします。論理プロパティを使用するのが良い習慣であるため、高さではなくブロック サイズ プロパティを使用します。ブラウザはコンテンツが閉じた状態にあるときに content-visibility: hidden を設定するため、トランジションに content-visibility を含める必要があります。これを含めないと閉じるアニメーションは機能しません:
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
content-visibility プロパティは個別のアニメーション プロパティであるため、アニメーションは依然として期待どおりに機能しません。これは、補間がないことを意味します。ブラウザは 2 つの値の間で切り替わり、アニメーションの継続時間全体にわたって遷移されたコンテンツが表示されます。こんなことは望んでいません。
transition-behavior:allow-discrete; を含めると、アニメーションの最後で値が反転するため、段階的な遷移が得られます。
また、開示ウィジェットが中間状態にあるときにブロックサイズを 0 に設定すると、コンテンツのオーバーフローが発生します。コンテンツのほとんどは、開くときに表示されます。これを防ぐために、overflow: hidden を追加します。
最後に、開いた状態のスタイルを追加します。最終状態のサイズを auto:
にしたいとします。
details {
interpolate-size: allow-keywords;
}
これらは大まかに説明します。より詳細なビデオ説明をご希望の場合は、Kevin Powell によるアニメーション化の方法に関するチュートリアルをご覧ください。
「追加情報」の内容が
他のアニメーションと同様、動きに敏感なユーザーを考慮する必要があります。そのシナリオに対応するには、prefers-reduced-motion メディア クエリを使用できます。
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
一般的な UI パターンはアコーディオン コンポーネントです。これは、展開してコンテンツを表示できる開示ウィジェットのスタックで構成されています。このパターンを実装するには、複数の連続する
/* open state */
details[open]::details-content {
block-size: auto;
}
デフォルトのスタイルは非常にシンプルです:
それぞれの独自の行を占有します。これらは互いに近接して配置され (マージンやパディングなし)、近接しているためグループとして認識されます。グループ化されていることを強調したい場合は、以下の例に示すように、境界線を追加して同じ背景スタイルを与えることができます。
このパターンのバリエーションは、アコーディオンを排他的にして、一度に 1 つの開示ウィジェットだけを開くことができるようにすることです。一方が開かれるとすぐに、ブラウザはもう一方を閉じます。
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
専用アコーディオンを使用する前に、それがユーザーにとって役立つかどうかを検討してください。ユーザーがより多くの情報を利用したいと考えている場合、アイテムを頻繁に開く必要があり、イライラする可能性があります。
この機能は現在すべての最新ブラウザでサポートされているため、すぐに使用できます。
開示ウィジェットは通常、横に小さな三角形のマーカーとともに表示されます。このセクションでは、このマーカーのスタイルを設定するプロセスについて説明します。
マーカーは
前述したように、 [
例に入る前に、ブラウザのサポートについて簡単に説明します。この記事の執筆時点では、Safari はマーカーのスタイル設定を完全にはサポートしていない唯一の主要ブラウザです:
三角形のマーカーの色を赤に変更し、50% 大きくしたいとします。次のことができます:
details {
interpolate-size: allow-keywords;
}
これはすべてのブラウザで機能するはずです。これが CodePen の例です。
デフォルトでは、マーカーは
list-style-position を外側に設定すると、マーカーは
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
これは、上のスクリーンショットの 2 番目のインスタンスで確認できます。
この例の CodePen は次のとおりです:
マーカーの内容を変更したい場合は、::mark 疑似要素の content プロパティを使用できます。好みに応じて、テキストに設定できます。私の例では、閉じた状態にはジッパーの口の絵文字を、開いた状態には開いた口の絵文字を使用しました。
details {
interpolate-size: allow-keywords;
}
マーカーに画像を使用するには、::marker 疑似要素の content プロパティ、または
の list-style-image プロパティを使用できます。
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
次の例では、マテリアル シンボルの 2 つの矢印アイコンをマーカーに使用しています。右向きの矢印は閉じた状態を表し、下向きの矢印は開いた状態を表します:
これらの例は Chrome と Firefox では期待どおりに動作しますが、Safari ではスタイルが無視されます。これを段階的な機能強化としてアプローチして、これで終わりにすることもできます。ただし、すべてのブラウザーで同じ外観にしたい場合は、マーカーを非表示にして、独自の画像を代用として追加できます。これにより、より自由度が高まります:
/* open state */
details[open]::details-content {
block-size: auto;
}
インライン画像や擬似要素などの新しいマーカー アイコンを使用して、状態を視覚的に示すことができます。 すでに（ほとんど）展開/折りたたみ状態を示しています。したがって、インライン グラフィックを使用する場合は、装飾として扱う必要があります。空の alt 属性はこれを行います:
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
必要に応じて、マーカーを
details {
interpolate-size: allow-keywords;
}
ただし、マーカーを非表示にすると、スクリーン リーダーでのアクセシビリティの問題が発生することに注意することが重要です。 Firefox、VoiceOver、JAWS、NVDA にはすべて、マーカーが削除された場合に開示ウィジェットの切り替え状態を一貫して通知するという問題があります。残念ながら、スタイルは州と結びついています。これを行わないことをお勧めします。
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
私のおすすめは、
/* open state */
details[open]::details-content {
block-size: auto;
}
あるいは、セクション全体を対象とする ::details-content 疑似要素を使用することもできます。これが、開始および終了の状態遷移をアニメーション化するためにこれを使用する理由です:
>@media (prefers-reduced-motion) {
/* styles to apply if a user's device settings are set to reduced motion */
details::details-content {
transition-duration: 0.8s; /* slower speed */
}
}
違いに気づきましたか?セクションの先頭にはマージンが 1 つだけあります。
<details>
<summary>Payment Options</summary>
<p>...</p>
</details>
<details>
<summary>Personalise your PIN</summary>
<p>...</p>
</details>
<details>
<summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
<p>...</p>
</details>
<まとめ>要素にはデフォルトの ARIA ロールであるボタンがあり、子要素からすべてのロールが削除されます。したがって、
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
マーカーを非表示にすると、一部のスクリーン リーダーでアクセシビリティの問題が発生します。 Firefox、VoiceOver、JAWS、NVDA にはすべて、マーカーが削除された場合に開示ウィジェットの切り替え状態を一貫して通知するという問題があります
最近、<詳細>の作成を支援する大きな提案がありました。よりカスタマイズ可能で、ブラウザ間での相互運用性が向上します。フェーズ 1 には、この記事で説明した内容の一部が含まれています。
嬉しいニュースは、上記のリストの項目 1 と 3 が Chrome 131 (2024 年 11 月現在) で出荷されたことです。次の段階では、マーカーのスタイルの改善に取り組む必要があります。さらに、これらの要素をアニメーション化する機能の向上に役立つ一連の関連変更があります。
HTML 要素は CSS でカスタマイズするのがはるかに簡単になりました。ブラウザーを完全にサポートする排他的なグループを作成し、段階的な拡張機能として開閉状態の遷移をアニメーション化し、マーカーの簡単なスタイルを実行できるようになりました。
のアキレス腱マーカーのスタイルです。良いニュースは、この点や他のいくつかの問題点に対処する積極的な提案があることです。これにより、
Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。
LogRocket は Web アプリやモバイル アプリ用の DVR のようなもので、Web アプリ、モバイル アプリ、または Web サイトで発生するすべてを記録します。問題が発生する理由を推測する代わりに、主要なフロントエンド パフォーマンス メトリクスを集計してレポートし、アプリケーションの状態とともにユーザー セッションを再生し、ネットワーク リクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。
Web アプリやモバイル アプリのデバッグ方法を最新化します。無料で監視を始めましょう。
以上が最新の CSS を使用した HTML のスタイル設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
