• Top
• Category
• Contact
• About

サイト構築 -制作

sponsorsr

12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいクエリ、background-position-x/yの相対構文、font-language-overrideプロパティなど、Web制作者は要チェックです！

New in Chrome 143
Chrome 143 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• CSSのアンカーコンテナクエリでフォールバック位置を検出
• background-position-x/yの相対構文
• CSSのfont-language-overrideプロパティ
• TextFormatのunderlineStyleおよびunderlineThickness

はじめに

12/3にリリースされたChrome 143で4つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 143は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その4つの新しいCSSとUIに関する機能を紹介します。

CSSのアンカーコンテナクエリでフォールバック位置を検出

@container anchored(fallback)という新しいクエリを使用すると、アンカーポジショニングで配置された要素の子要素に適用されたposition-try-fallbacksの値に基づいてスタイルを設定できます。

たとえば、アンカー要素とアンカー付き要素の相対的な位置関係に応じて、アンカー付き要素のテザーやアニメーションのスタイルを下記のように設定できます。

CSSのアンカーポジショニングはFirefoxを除く、すべてのブラウザでサポートされています。Firefoxでも145あるいは147でサポートされる予定です。

この機能を使用すると、ブラウザがアンカーの位置を認識した方法に基づいてスタイルを適用できます。

下記のデモでは、要素の位置に応じてツールチップのスタイルが変更されます。
※Chrome 143+でご覧ください。

See the Pen
@container anchored(fallback)のデモ by coliss (@coliss)
onCodePen.

詳しくは、下記ページをご覧ください。

• Detect fallback positions with anchored container queries from Chrome 143

background-position-x/yの相対構文

background-positionのロングハンド プロパティにおいて、background-position-xとbackground-position-yで端の1つを基準として位置を相対値で定義できます。

この構文は、ウインドウやフレームのサイズに合わせて調整する必要な固定値を使用する代わりに、背景画像の位置を定義するためのより柔軟でレスポンシブな仕組みを提供するものです。

この昨日はWeb互換レベルを統一するため、-webkit-mask-positionにも適用されます。

CSSのfont-language-overrideプロパティ

CSSの新しいプロパティfont-language-overrideがChrome 143+でサポートされました。このプロパティにより、CSS内で直接4文字の言語タグを指定することで、OpenTypeグリフの置換に使用されるシステム言語を上書きできます。

このプロパティを使用することで、きめ細やかなタイポグラフィ制御が可能になり、多言語コンテンツや言語固有のグリフバリアントを持つフォントに役立ちます。

TextFormatのunderlineStyleおよびunderlineThickness

先日リリースされたEditContext APIでは、EditContext/textformatupdate_eventによって提供されるTextFormatオブジェクトがunderlineStyleおよびunderlineThicknessプロパティに対して誤った値を返すというバグがありました。本来取り得る値はNone,Solid,Dotted,Dashed,Squiggle,Thin,Thickです。しかし、EditContext仕様書によると、none,solid,dotted,dashed,wavy,thin,thickであるべきです。

Related Posts

coliss