ネイティブ HTML: アコーディオンの再考

6 年前、私はネイティブの を探索しました。 アクセシブルなアコーディオンを作成するための要素。それ以来、Web プラットフォームは進化し、独自のオープン動作やスムーズなアニメーションなどのエキサイティングな新機能をこれらの要素に導入しました。

ネイティブ HTML: アコーディオン

アンドリュー・ボーン ・ 2019 年 1 月 4 日

#html #css #a11y ＃デザイン

この記事では、

について再度説明します。最新の CSS プロパティを最大限に活用して、アコーディオンに磨きをかけます。これらの機能を紹介するデモ実装も共有します。

基本:

要素は、HTML で切り替え可能なセクションを作成するネイティブな方法を提供します。クリック可能なラベルとして機能する要素。これにより、最小限の労力で開示ウィジェットを簡単に作成できるようになります。

これは簡単な例です:

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

概要をクリックすると、関連するコンテンツの表示が切り替わります。 JavaScript は必要ありません!

機能強化: 排他的なオープン動作

一度に 1 つのセクションだけを開く従来のアコーディオンの動作を模倣するには、

で name 属性を使用できます。要素。 の場合要素は同じ名前を共有しており、1 つを開くとグループ内の他の要素も自動的に閉じます。

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

この動作はネイティブであり、最新のブラウザでシームレスに動作します!

CSS を使用してスムーズなアニメーションを追加する

開始と終了のトランジションをよりスムーズにするには、interpolate-size やtransition-behavior などの最新の CSS プロパティを使用できます。

主要なプロパティ

• interpolate-size: 固有のサイズ (自動など) と固定サイズの間のアニメーションを許可します。 このプロパティは現在 Chrome でのみサポートされています。
• transition-behavior:allow-discrete に設定すると、可視性や表示など通常アニメーション化できないプロパティは、即座に更新されずに待機します。

スタイリング例

デモで使用される CSS の完全な例は次のとおりです:

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

仕組み

1. 高さアニメーション: interpolate-size プロパティにより、高さ: 0 (閉じた状態) と高さ: 自動 (開いた状態) の間のスムーズな移行が可能になります。ただし、これは現在 Chrome でのみサポートされています。
2. 可視性遷移: 遷移動作プロパティにより、可視性の変化がシームレスに見えるようになります。

デモ: すべてを統合する

完全な実装は次のとおりです:

ブラウザのサポート

• interpolate-size: 現在、Chrome でのみサポートされています。
• 遷移動作: ほとんどの最新ブラウザでサポートされています。

サポートされていないブラウザの場合、アニメーションは正常にフォールバックし、アコーディオンはスムーズな遷移がなくても機能し続けます。

結論

要素を最新の CSS と組み合わせることで、インタラクティブなアコーディオンを作成するための軽量でアクセスしやすいソリューションが提供されます。これらの新しい機能強化により、最新の Web プロジェクトにとってさらに魅力的なものになります。デモを試して、あなたのアコーディオンに新鮮で洗練された外観を与えてください!

読んでいただきありがとうございます。開発外で私とつながりたい場合は、私の twitter、bsky、linkedin に連絡してください?

以上がネイティブ HTML: アコーディオンの再考の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。