タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
HTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、 Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、 Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、 UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confir
Chrome 114からPopover APIがサポートされました。 Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 基本的な使い方からdialogとの使い分けまで調べたのでまとめたいと思います。 基本的な使い方 Popoverを表示する方法は2つあります。 popover属性とpopovertarget属性を使用する方法 以下のように、ポップオーバーで表示したい要素に対して popoverとidを指定、トリガーとする<button>(もしくは<input>)に対して、popovertargetでpopoverで指定したid指定します。 これでボタンを押せば表示できます。 <div id="popover" popover>contents</div>
Intro 前回までは <dialog> が標準化されるまでの経緯と、 API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視(display: none)な要素となっている。 open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() しかし、基本的に <dialog> は動的に出てくるため、JS で開くことになるだろう。しかし、 open 属性を動的に付けるのではなく、 show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEve
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、 JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とす
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Toast 次は、 Popover の源流にもなった、画面端にメッセージを表示するいわゆる Toast UI について考えてみる。想定するのは以下のようなものだ。 メッセージの性質によって、色やアイコンのスタイルを変えられ、同時に複数積み上げて表示できるといった仕様が一般的だ。 HTML 基本は <div popover> となる。また、複数のメッセージがあった場合に、他のが表示されても消えないよう、 manual を指定する。 <div popover="manual"> </div> もし内容のレイアウトで Flex や
はじめに みなさんは、HTMLのpopover属性をご存じでしょうか？ 実は、先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 そこで今回は、popover属性を使って、JavaScriptを使わずに、モーダルを作ったので、紹介したいと思います。 HTMLのpopover属性とは popover属性は、モーダルのような表示されている画面より上の階層に要素を表示させたい時に、JavaScript等で実装することなく、実装できるようになる属性です。 使い方 1. popoverで表示させたい要素にpopoverを指定する popoverで表示させたい要素にpopover属性を指定することで、ポップオーバー要素として示すことができます。
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Cookie バナー 次は、「Cookie 利用への同意」いわゆる Cookie バナーの UI について考えてみる。想定するのは以下のようなものだ。 前回の規約への同意と異なり、このバナーは画面表示時から右下に表示され、同意か拒否を選択するまで表示し続ける。つまり、表示中は他の操作をブロックしたりはしない。 つまり Dialog ではあるが Modal ではないため、 show() する前提で実装を考えていく。 HTML HTML の注意点は、前回の規約と大きくは変わらない。 まず、最初から表示しておくため open 属性
Intro ここまでで <dialog> 要素が標準化され、 Modal/non-Modal な Dialog がネイティブで出せるようになった。 今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。 Top Layer inert :modal / ::backdrop CloseWatcher Focusable Scrollers etc しかし、 <dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、 role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。 そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、 <dialog> の標準化の裏で並行して行われた。 Toast 最初の
Popoverの機能 Popover APIには便利な機能が標準で搭載されているため紹介します。 最上位のレイヤーに配置される ポップオーバーが最上位に出現するため、z-indexを調整する必要がありません。 ライトディスミス機能 簡易非表示という概念であり、 ESCキーで閉じる ポップオーバーの外側をクリックすると閉じる という機能で、ポップオーバー外をクリックして閉じるという動作を標準で対応しており、ESCキーで閉じることができるためアクセシビリティにも配慮されています。 複数のポップオーバーがあった場合は勝手に他を閉じてくれる 一つ目のポップオーバーを開いた状態で二つ目のポップオーバーを開くと自動的に一つ目のポップオーバーを閉じてくれます。 実装方法 実装方法は至ってシンプルです。 ポップオーバーにしたい要素にpopover属性と任意のidを付与 ポップオーバーの開閉を制御したい要素
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Tooltip 今回は、 Menu の実装を考えてみる。 GitHub でいうとこの部分だ。 元となるボタンによって表示され、このボタンからの相対位置で調整されるため Anchor Positioning を活用することになる。非常に良くある実装パターンだ。 HTML の仕様にも、類似の実装が Example として掲載されている。 6.12 The popover attribute https://html.spec.whatwg.org/multipage/popover.html#the-popover-attrib
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript. A very common pattern on the web is to show content over the top of other content, drawing the user's attention to specific important information or actions t
HTML の popover 属性が、すべてのモダンブラウザにおいて正式にサポートされ、足並みがそろいましたので、popover 属性について簡単に紹介します。 先日、Firefox 125 （125.0.1） が正式にリリースされましたが、このバージョンで、HTML の popover 属性、および popovertarget 属性、popovertargetaction 属性、CSS の :popover-open 疑似クラス、::backdrop 疑似要素の popover 対応といった Popover API 関連のサポートが行われました。 Firefox 以外のモダンブラウザではすでにサポートが完了していましたので、これですべてのブラウザで使用できる状態になったといえます。 popover - Can I use... 個人的に画面上に何かしらポップアップして表示するような UI
Effortless Tooltip Creation with the Popover API and New CSS Features I've often struggled with making tooltips that not only look good but also work well across different browsers and screen sizes. In one of my recent projects, I spent hours fixing rendering bugs and tweaking code to ensure the tooltip looked and worked perfectly. That's when I discovered the Popover API, which made everything so
Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、 2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、 popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-ww
Blogger に Amazon アソシエイトの「Mobile Popover」を入れようと... 「デザイン」－「テーマ」－「カスタマイズ」－「HTML を編集」． <head> と </head> の間にあたる部分に貼り付けて保存しようとすると， org.xml.sax.SAXParseException; lineNumber: 39; columnNumber: 86; The reference to entity "Operation" must end with the ';' delimiter. どうも "&" がダメな様で "&" に． <script src='//ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&
Intro ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。 とはいえ実装は popup とそんなに変わらないので、 popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。 Intent to extend Origin Trial: Popover API https://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJ しかし、 popover を実用するには足りていない議論があった、それが Animation だ。 Display and content-visibility animations <dialog> や popov
ヘルプには </body> の直前とあるが... <head></head> の間のアドセンスのコードの次に入れてみた． help.hatenablog.com また，記事内に商品リンクが必要とあるので... 2020/10/30 すぐにはわからなかったが，これで良さそう． 「Mobile Popover」が表示されている時は，商品リンクの右に★が点く．
こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみるではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダルまずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="popover">シンプルモーダル表示</button> <div id="popove
Popover API (Explainer)@mfreed7, @scottaohara, @BoCupp-Microsoft, @domenic, @gregwhitworth, @chrishtr, @dandclark, @una, @smhigley, @aleventhal, @jh3yMay 4, 2023NOTE: This Popover API explainer was mostly useful during the development of the feature. While it is roughly still in line with the actual feature, it might be more informative to look at either of these two sources of documentation: The
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger に amazon 「Mobile Popover」
