ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

Post on:2024年3月26日

はじめに

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値に基づいて適切なカラーを自動的に選択します。

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

html {

color-scheme: light dark;

}

.target {

background-color: light-dark(lime, green);

}

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

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

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

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

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

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

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

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

@media all and (display-mode: picture-in-picture) {

body {

margin: 0;

}

h1 {

font-size: 0.8em;

}

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

ブロックにおける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のみサポートされました。詳しくは、下記をご覧ください。