以前は、単純な拡張可能なコンテンツブロックを作成するには、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 サイトの他の関連記事を参照してください。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Dreamweaver Mac版
ビジュアル Web 開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ホットトピック



