• Top
• Category
• Contact
• About

サイト構築 -CSS

sponsorsr

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。
ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。

Chrome 123 beta
New in Chrome 123

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

• はじめに
• CSSのlight-dark()カラー関数
• CSSのdisplay-modeでpicture-in-pictureをサポート
• ブロックにおけるalign-contentプロパティ
• CSSのfield-sizingプロパティ
• CSSのtext-spacing-trimプロパティ

はじめに

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

以下、その5つの新しいCSSの機能を紹介します。

CSSのlight-dark()カラー関数

CSSのlight-dark()関数を使用すると、ライトモードまたはダークモードを簡単に設定することができます。

light-dark()関数の使い方は、簡単です。この1つのプロパティで2つの異なるカラーの値を設定します。ブラウザ（またはデバイス）は、設定されたcolor-scheme値に基づいて適切なカラーを自動的に選択します。

たとえば、上記のCSSを使用すると、

• ユーザーがライトテーマを選択した場合、.target要素の背景はlimeになります。
• ユーザーがダークテーマを選択した場合、.target要素の背景はgreenになります。

light-dark()関数は、Chrome 123, Edge 123, Firefox 120+にサポートされており、Safariでも次のバージョンでサポート予定です。詳しくは、下記をご覧ください。

CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！

CSSのdisplay-modeでpicture-in-pictureをサポート

CSSのdisplay-modeメディア機能でpicture-in-picture値のサポートが追加されます。これより、Webアプリがピクチャインピクチャモードで表示される場合にのみ適用されるCSSルールを作成できます。

ピクチャインピクチャモードで表示される場合のみ適用されます。

ブロックにおけるalign-contentプロパティ

CSSのalign-contentプロパティが、ブロックコンテナとテーブルセルでサポートされます。以前は、このプロパティはflexやgridアイテムでのみサポートされていましたが、たとえばdisplay: block;,display: list-item;,display: table-cell;などでもalign-contentを使用して配置できます。

align-contentプロパティは、Chrome 123, Edge 123, Safari 17.4にサポートされており、Firefoxでも間もなくサポート予定です。詳しくは、下記をご覧ください。

Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

CSSのfield-sizingプロパティ

CSSのfield-sizingプロパティを使用すると、フォームコントロールのデフォルトサイズを無効にし、そのサイズをコンテンツに依存させることができます。これにより自動的にサイズが大きくなるテキストフィールドを作成できます。

【訳者注】以前はform-sizingで進められていましたが、field-sizingに変更された模様です。

field-sizingプロパティは、Chrome 123, Edge 123のみサポートされました。詳しくは、下記をご覧ください。

CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

CSSのtext-spacing-trimプロパティ

CSSのtext-spacing-trimプロパティは、JLREQ (Requirements for Japanese Text Layout)とCLREQ (Requirements for Chinese Text Layout)で定義されているように、中国語・日本語・韓国語（CJK）の句読点文字にカーニングを適用して、視覚的に美しいタイポグラフィを作成します。

CJKの句読点文字には、グリフ間にスペースが含まれています。たとえば、ピリオドと閉じ括弧には他の表意文字と同じようにするためグリフスペースの右半分にスペースを持っています。しかし、これらが連続して出現すると、グリフ間のスペーシングが大きくなりすぎます。この機能はそのような過剰なスペーシングを調整するものです。

text-spacing-trimプロパティには、normal,trim-start,space-all,space-firstの4種類の値があります。

text-spacing-trimプロパティは、Chrome 123, Edge 123のみサポートされました。詳しくは、下記をご覧ください。

CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

Related Posts

coliss