最新の CSS を使用した HTML

ロブ・オリアリー著✏️

HTML 要素は開示ウィジェットと総称されますが、スタイルを設定するのは簡単ではありません。制限があるため、カスタム コンポーネントを使用して独自のバージョンを作成することがよくあります。ただし、CSS が進化するにつれて、これらの要素はカスタマイズしやすくなりました。この記事では、開示ウィジェットの外観と動作をカスタマイズする方法について説明します。

の方法一緒に仕事しますか？

は、追加情報が非表示になる開示ウィジェットを作成する HTML 要素です。開示ウィジェットは通常、何らかのテキストを伴う三角形のマーカーとして表示されます。

ユーザーがウィジェットをクリックするか、ウィジェットに焦点を当ててスペースバーを押すと、ウィジェットが開き、追加情報が表示されます。三角形のマーカーは下向きで、開いた状態であることを示します:

開示ウィジェットには常に表示されるラベルがあり、

によって提供されます。要素。これが最初の子供です。省略した場合、ブラウザによってデフォルトのラベルが提供されます。通常、「詳細」と表示されます:

の後に複数の要素を指定することもできます。追加情報を表す要素:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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 が含まれているため、[

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) 要素に似ています。したがって、[list-style](https://developer.mozilla.org/docs/Web/CSS/list-style) 短縮プロパティとその短縮プロパティをサポートします。ブラウザーによるリスト スタイル プロパティのサポートは非​​常に優れていますが、Safari はまだ遅れています。

開示ウィジェットには、その構成部分をスタイルするための 2 つの疑似要素があります。

1. ::mark 擬似要素:
   の先頭にある三角形のマーカーを表します。このスタイリングの話は少し複雑です。 CSS プロパティの少数のセットに制限されています。ブラウザのサポートは ::marker には適していますが、Safari は現在、プロパティの完全なセットをサポートしていません。これについては、この記事の「概要マーカーのスタイル設定」セクションで詳しく説明します
2. ::details-content 擬似要素:
   の「追加情報」を表します。これは最近追加されたものであるため、ブラウザのサポートは現在 Chrome に限定されています

次のセクションでは、公開ウィジェットをカスタマイズするための、あまり知られていない新しい方法をいくつか紹介します。

開くアクションと閉じるアクションをアニメーション化する

開示ウィジェットを開くと、即座に開きます。瞬きすると見逃してしまいますよ！

ユーザーのアクションの影響を示すために、より段階的な方法で 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 id="Additional-info">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 id="Additional-info">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 つの開示ウィジェットだけを開くことができるようにすることです。一方が開かれるとすぐに、ブラウザはもう一方を閉じます。

の name 属性を使用して排他的なグループを作成できます。同じ名前を持つと、セマンティック グループが形成されます:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

専用アコーディオンを使用する前に、それがユーザーにとって役立つかどうかを検討してください。ユーザーがより多くの情報を利用したいと考えている場合、アイテムを頻繁に開く必要があり、イライラする可能性があります。

この機能は現在すべての最新ブラウザでサポートされているため、すぐに使用できます。

サマリーマーカーのスタイル設定

開示ウィジェットは通常、横に小さな三角形のマーカーとともに表示されます。このセクションでは、このマーカーのスタイルを設定するプロセスについて説明します。

マーカーは

に関連付けられています。要素。 [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) 疑似要素の追加は、マーカー ボックスのスタイルを直接設定できることを意味します。ただし、CSS プロパティの少数のセットに制限されています:

• すべてのフォントのプロパティ
• カラー
• ホワイトスペース
• text-combine-upright、[unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)、および方向プロパティ
• コンテンツ
• すべてのアニメーションとトランジションのプロパティ

前述したように、 [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) に似ています。リスト形式の省略表現プロパティとその省略表現プロパティをサポートします。これは少しごちゃ混ぜに聞こえるかもしれませんが、いくつかの例を使用すると、スタイル オプションを理解しやすくなります。

例に入る前に、ブラウザのサポートについて簡単に説明します。この記事の執筆時点では、Safari はマーカーのスタイル設定を完全にはサポートしていない唯一の主要ブラウザです:

• Safari のサポートは現在、::marker 疑似要素の色とフォント サイズのプロパティのスタイル設定に限定されています。 Safari は非標準の疑似要素 ::-webkit-details-marker をサポートしています
• Safari はリスト スタイル プロパティのスタイル設定をまったくサポートしていません。参考として「CanIUse」を参照してください

マーカーの色とサイズを変更する

三角形のマーカーの色を赤に変更し、50% 大きくしたいとします。次のことができます:

details {
    interpolate-size: allow-keywords;
}

これはすべてのブラウザで機能するはずです。これが CodePen の例です。

マーカーの間隔を調整する

デフォルトでは、マーカーは

のテキスト コンテンツの横にあります。そしてそれらは同じ境界ボックス内にあります。 list-style-position は inside に設定されます。開いた状態では、マーカーの直下に「付加情報」が表示されます。おそらく、これの間隔と配置を変更したいと思うでしょう:

list-style-position を外側に設定すると、マーカーは

の外側に配置されます。境界ボックス。これにより、概要テキストとマーカーの間のスペースを調整できるようになります:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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 id="Additional-info">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;
}

私のおすすめは、

を除外することです。 :not() 関数を使用して要素を作成します。これは、コンテンツを 1 つのセクションとしてではなく、各要素を対象としていることに注意してください。

/* 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-content 疑似要素を使用する場合の欠点は、ブラウザのサポートが現在 Chrome に限定されていることです。

開示ウィジェットのスタイルを設定する際のよくある間違い

• これまで、
  の表示タイプを変更することはできませんでした。要素。この制限は Chrome では緩和されました
• の表示タイプを変更する場合は注意してください。デフォルトは、display: list-item;; です。これを display: block; に変更すると、一部のブラウザではマーカーが非表示になる可能性があります。これは Firefox の問題でした。

<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 id="Additional-info">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. CSS 表示プロパティ制限を削除して、フレックスやグリッドなどの他の表示タイプを使用できるようにします
2. シャドウツリーの構造をより明確に指定します。これは、Flexbox および CSS グリッドとの相互運用性に役立ちます。
3. ::details-content 疑似要素を追加して 2 番目のスロットをアドレス指定します。これにより、
   内の「追加情報」のコンテナーが作成されます。要素はスタイル設定可能

嬉しいニュースは、上記のリストの項目 1 と 3 が Chrome 131 (2024 年 11 月現在) で出荷されたことです。次の段階では、マーカーのスタイルの改善に取り組む必要があります。さらに、これらの要素をアニメーション化する機能の向上に役立つ一連の関連変更があります。

結論

HTML 要素は CSS でカスタマイズするのがはるかに簡単になりました。ブラウザーを完全にサポートする排他的なグループを作成し、段階的な拡張機能として開閉状態の遷移をアニメーション化し、マーカーの簡単なスタイルを実行できるようになりました。

のアキレス腱マーカーのスタイルです。良いニュースは、この点や他のいくつかの問題点に対処する積極的な提案があることです。これにより、

を使用する際のすべての障害が解消されます。近い将来、独自の開示ウィジェットを作成したり、サードパーティの Web コンポーネントを使用したりする必要はなくなります。 ?

---

フロントエンドがユーザーの CPU を占有していませんか?

Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。

LogRocket は Web アプリやモバイル アプリ用の DVR のようなもので、Web アプリ、モバイル アプリ、または Web サイトで発生するすべてを記録します。問題が発生する理由を推測する代わりに、主要なフロントエンド パフォーマンス メトリクスを集計してレポートし、アプリケーションの状態とともにユーザー セッションを再生し、ネットワーク リクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。

Web アプリやモバイル アプリのデバッグ方法を最新化します。無料で監視を始めましょう。

以上が最新の CSS を使用した HTML

と

のスタイル設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。