編集

Chrome 114

#Chrome #CSS #Popover API

Chrome 114 がリリース。

#text-wrap: balance

text-wrap: balanceを利用すれば、長い文字列をそれぞれの行の長さができるだけ等しくなるように改行できます。

これを利用すれば多言語サイトで、言語毎に見た目を微調整するといったケースを少し回避できるかもしれません。ただし現状 Chrome 以外でtext-wrapはサポートされていないので、使用できる機会はかなり限られます。

#Popover API

Popover API を利用すれば、一時的な UI 要素、ユーザーの行動を制限しない非モーダルなオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを簡単に実装できます。

モーダルつまり、それ自身が何らかのインタラクションを行うまでユーザーの行動を制限したい場合は、既に主要なブラウザで利用できる dialog 要素が推奨されます。ただし、dialog 要素はデフォルトで最上位レイヤーに来ないため、最上位に配置される Popover API を併用したくなることは多々あるように思います。

Popover API には、HTML 属性を利用した宣言的な方法と JavaScript を利用する方法が用意されています。HTML 属性を利用した方法では次のようにします。

html
<button popovertarget="my-popover">押すとポップオーバーが表示される</button>

<div id="my-popover" popover>
  <p>これはポップオーバーです。</p>
  <p></p>
</div>

詳しい使い方については、次の Chrome の記事などを呼んでください。

https://developer.chrome.com/blog/introducing-popover-api/

現時点では、Chrome 及び Safari の Technology Preview でのみ利用できます。

#参考文献

編集