Web制作者は要チェック！余分なマージンを取り除くmargin-trimプロパティなど、Chrome 155で追加されたCSSの新機能

Post on:2026年10月8日

sponsorsr

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

今回のアップデートで注目すべきは、カウンターのスタイルをインラインで定義できるsymbols()関数、装飾線の見栄えをよくするtext-decoration-skip-spacesプロパティ、コンテナ内の余分なマージンを取り除くmargin-trimプロパティなど、Web制作者は要チェックです！

New in Chrome 155
Chrome 155 beta

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

はじめに
CSSのsymbols()関数
CSSのcornerショートハンドプロパティ
CSSのtext-decoration-skip-spacesプロパティ
CSSのmargin-trimプロパティ

はじめに

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

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

CSSのsymbols()関数

CSSのsymbols()関数は、@counter-styleアットルールで名前付きカウンタースタイルを宣言する代わりに、インラインでカウンターのスタイルを定義することができます。

この関数を使用することで、文字列シンボルのリストをオプションのカウントシステム（cyclic, numeric, alphabetic, symbolic, fixed）から無名（anonymous）のカウンタースタイルを生成できます。生成されたスタイルはlist-style-type, list-styleのショートハンド, counter(), counters()関数においてカウンタースタイルとして使用可能です。

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

1	symbols() = symbols( <symbols-type>? [ <string> \| <image> ]+ );

<symbols-type>の値は下記の通り。

cyclic: 定義された順序で与えられた値を順に処理し、処理の終わりに達すると開始位置に戻ります。
numeric: 与えられた値を位取り記数法の連続する単位として解釈します。
alphabetic: 与えられた値をアルファベット記数法の数字として解釈しますが、位取り記数法は使用しません。
symbolic: 値を順番に処理し、各サイクルで値を1回ずつ追加で出力します。
fixed: 指定された値を一度繰り返した後、アラビア数字にフォールバックします。

たとえば、下記のHTMLに適用してみます。

<ol class="symbols-test">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

<li>Three</li>

</ol>

CSSは、下記の通り。

ol.symbols-test {
  list-style: symbols(cyclic "*" "†" "‡");
}

ol.symbols-test {

list-style: symbols(cyclic "*" "†" "‡");

}

実際の動作はChrome 155+でご覧ください。「*†‡」がリストのマークになっています。

One
Two
Three
Four
Five

CSSのcornerショートハンドプロパティ

CSSのcornerショートハンドおよび各コーナーごとのサブショートハンド（corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right)に加え、物理プロパティ（corner-top, corner-bottom）および論理プロパティ（corner-block-start, corner-block-end）を実装します。これらにより、1つの宣言で個々のコーナーに対してborder-radiusとcorner-shapeの両方を設定できるようになりました。なお、cornerショートハンドとの互換性維持のため、cornersという名称もエイリアスとして引き続き利用可能です。

また、この機能にはキャッシュ制御も含まれています。デフォルトではrandom()関数は呼び出されるたびに新しい値を返します。デベロッパーは関数の第1引数に<random-key>値を設定することでデフォルトの挙動を上書きし、プロパティや要素間でランダム値がどのように共有されるかを制御できます。

CSSのtext-decoration-skip-spacesプロパティ

CSSのtext-decoration-skip-spacesプロパティは、テキストの装飾線（下線・上線・打ち消し線など）が空白文字を飛び越えるかどうかを制御します。

このプロパティを使用するとこで、デベロッパーは空白の下に装飾線が描画されるのを防ぐことができ、装飾線の見栄えがよくなります。

以下のオレンジ色の文字AからFの下に青色の下線があれば合格です。
※Aの左側とFの右側に小さなオレンジ色の線があるのは問題ありません。

 　  ABCDEF    　

CSSは、下記の通りです。

div {
    text-decoration: underline;
    text-decoration-color: blue;
    text-decoration-skip-spaces: start end;
    color: orange;
    font-size: 2em;
}

div {

text-decoration: underline;

text-decoration-color: blue;

text-decoration-skip-spaces: start end;

color: orange;

font-size: 2em;

}

CSSのmargin-trimプロパティ

CSSのmargin-trimプロパティは、コンテナの最初または最後の子要素の前後に設定されたマージンを取り除くことができます。このプロパティは、通常のブロックコンテナやマルチカラムコンテナでサポートされています。

margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;