これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能
Post on:2025年7月1日
sponsorsr
先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！
特にstretchキーワードは、朗報です。
width: calc(100% - 48px);で全幅からマージン分を引いていたのをwidth: stretch;だけで利用可能な幅いっぱいを占めるようにできます。
New in Chrome 138
Chrome 138 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- width: 100%;のより良い代替手段width: stretch;
- CSSの符号関連関数: abs(), sign()
- OSレベルのフォントスケールを設定するCSS環境変数
- 兄弟の数や順序を返すsibling-*()関数
- コンテナ内の進行比率を計算できる*-progress()関数
- 折りたたみ式デバイスをターゲットにするAPI
はじめに
6/25にリリースされたChrome 138で6個のCSSの新しい機能が追加されました。対象となるChrome 138は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その6個の新しいCSSの機能を紹介します。
width: 100%;のより良い代替手段width: stretch;
stretch値はCSSのサイジングプロパティ（widthやheightなど）に使用でき、要素を包括ブロックの利用可能なスペースぴったりに配置できます。100%に似ていますが、box-sizingで指定されたボックスではなく、要素のマージンボックスに適用されます。
width: stretch;を設定すると、他の要素がdivやpなどの要素と同様に自動動作を採用できます。つまり、利用可能な幅を占めるように伸縮すると同時に、問題なくマージンを使用できます。
|
1 2 3 4 |
button { width: stretch; margin-inline: 24px; } |
実際の動作は、デモページをご覧ください。
width: 100%;だけだとオーバーフローし、width: calc(100%-48px);は期待通りに動作するのはこれまで通りです。
そして、width: stretch;も48px分マイナスの幅いっぱいになっているのが分かると思います。ちなみにwidth: auto;は全幅にはなりません。
See the Pen
width: stretch; by coliss (@coliss)
on CodePen.
stretchの機能は、実はかなり前からサポートされています。ただし、ベンダープレフィックスが必要でしたが、Chrome 138からなしで使用できます。
|
1 2 3 |
width: -webkit-fill-available; width: -moz-available; width: stretch; |
stretchキーワードについて詳しくは、下記をご覧ください。
CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
CSSの符号関連関数: abs(), sign()
CSSの符号関連関数 abs(), sign() は、引数の符号に関連するさまざまな関数を計算できます。
abs(A)関数は、計算Aを1つ含み、入力と同じ型でAの絶対値を返します。また、sign(A)は計算Aを1つ含み、Aの数値が負の場合は-1を、正の場合は+1を返します。
下記のCSSだと、widthの値は計算値が負の場合でも絶対値を返します。
|
1 |
width: abs(20% - 100px); |
OSレベルのフォントスケールを設定するCSS環境変数
ユーザーの好みのフォントスケールをCSSに公開します。現在のところ、ユーザーがOSの環境設定で好みのフォントサイズを変更したかどうかをページ側で検出することは現実的ではありません。CSS環境変数は、ユーザーが選択したスケールを反映します。
兄弟の数や順序を返すsibling-*()関数
sibling-index()関数とsibling-count()関数は、CSSのプロパティ値で整数として使用でき、それぞれ兄弟の中での位置や兄弟の総数に基づいて要素のスタイルを設定できます。
sibling-count(): 兄弟の数を返します。sibling-index(): 兄弟リスト内の要素の位置・順序を返します。
この新しい関数を使用することで、各要素にカスタムプロパティを設定したり、nth-childで個別セレクタを設定する必要はなくなります。
|
1 2 3 4 |
div{ width: calc(100% / sibling-count()); height: calc(sibling-index() * 100px); } |
sibling-index()関数とsibling-count()関数について詳しくは、下記をご覧ください。
コンテナ内の進行比率を計算できる*-progress()関数
progress()関数は、2つの計算（progress開始値とprogress終了値）間の1つの計算（progress値）の位置を示す<number>を返す数学関数です。結果は0と1の間の数値で、演算に使用することもできます。
このファミリーには 3 つの関数があります。
progress(): 汎用的な数学関数media-progress(): メディア機能用content-progress(): コンテナクエリ用
progressパラメータ（最初のパラメータ）にイージング関数が指定されていない場合、デフォルトでlinearが適用されます。
|
1 2 3 |
div{ width: calc(100% * progress(50px from 0px to 100px)); } |
progress()関数について詳しくは、下記をご覧ください。
折りたたみ式デバイスをターゲットにするAPI
Viewport Segments APIを使用すると、折りたたみ可能なデバイス（ラップトップ・タブレット・スマホなど）をターゲットにしたWebレイアウトを適用させることができます。ビューポートセグメントはビューポートの論理的に分離されたエリアの位置を寸法を定義します。セグメントとは、作成者が論理的に区別できるビューポートの領域です。
sponsors
