ツールチップを解決する方法を考える

本日の GUI チャレンジでは、@AdamArgyleInk がカスタム要素（ウェブ コンポーネントは含めない）でツールチップを作成し、:has()、変換、論理プロパティなどです。:has() を使用するための小さなバックアップ スクリプト以外は、すべて CSS で支えられています。スクリーン リーダーのエクスペリエンスもお見逃しなく。例年どおり特別な注意が払われています。

章:

  • 0:00 - はじめに
  • 0:20 - ツールチップと切り替えヒント
  • 2:22 - 機能の概要
  • 6:25 - スクリーン リーダーの UX
  • 9:06 - アクセシビリティ ツリー
  • 14:12 - :has()
  • 14:55 - HTML
  • 15:18 - CSS
  • 18:50 - JavaScript
  • 20:21 - 結び

リソース:

その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges

Google Chrome Developers に登録 → https://goo.gle/ChromeDevs

すべてのエピソードに戻る