最近リリースされたCSSの新機能と新しい関数のまとめ

Post on:2024年10月16日

はじめに

2024/9/13にCSS Values and Units Module Level 5のワーキングドラフトがリリースされました。これは以前のレベルを拡張したものですが、いくつか興味深い追加分も含まれています。

ランダム値、属性を任意のプロパティの値として使用、計算で順序を使用できるなど、少し前には想像もできなかったことが仕様に盛り込まれています。これらの機能の多くに共通するのは、CSSのコードを単純化することです。以前であれば複数のルールやハック的なソリューションが必要だったことが1行もしくは2行のCSSで実装が可能になります。

以下は、変更点と追加された新着のリストです（詳細は後述）。

[変更] attr関数: あらゆる属性とあらゆるプロパティで使用できるようになりました（コンテンツ上だけではありません）。
[新着] calc-size関数: autoやmin-contentなどのキーワードを計算値に使用できます。
[新着] first-valid()関数: 無効な値を持つカスタムプロパティの問題を回避します。
[新着] *-mix()関数ファミリー: 比率の新しい表記法が追加されました。
[新着] *-progress()関数ファミリー: 範囲間またはメディアやコンテナ内の進行比率を計算します。
[新着] random()関数とrandom-item()関数: 範囲やリストからランダムな値を返します。
[新着] sibling-count()関数とsibling-index()関数: 順序とサイズに応じて操作する整数値を返します。
[新着] toggle()関数: ネストされた要素をスタイルします。
[新着] 新しい関数表記: 引数に使用するカンマ区切りの曖昧さを避けるための新しい表記法。
[新着] 位置を示す論理プロパティとしてposition typeが拡張されます。

この記事で紹介する機能の多くは現在ワーキングドラフトであるため、機能が変更される可能性もあります。また、現在すべてのブラウザで利用できる機能ではありません（一部は利用可能です）。

attr関数の変更

attr関数の変更は、多くのデベロッパーを喜ばせます。

属性を読み込んでCSSで使用することは、新しいことではありません。attr()関数ですでに可能でしたが、不満点は文字列とコンテンツでしか機能しないという制限でした。

attr()関数はいくつかのアップデートを経て、データ型に依存しない任意のデータ属性を任意のプロパティで使用できるようになります。データ型を指定するだけでよくなり、必要に応じて期待通りに動作しない場合に備えてフォールバック値も設定できます。

<div data-width="50"></div>
<div data-width="70"></div>

<style>
  div{
    width: attr(data-width px);
  }
</style>

<style>

div{

width: attr(data-width px);

}

</style>

キーワードで計算できるcalc-size()関数

calc-size()は計算値にキーワード（auto, max-conetnt, fit-contentなど）を使用できる新しい関数です。トランジションやアニメーションで特に役立ちます。

また、新しいキーワード（size）も追加され、サイズを簡単に操作できるようになります。

calc()がすでにあるのに、なぜ新しい関数が必要なのでしょうか。ドキュメントには後方互換性と実用的な理由（すべてのケースでスムーズな補間、特にパーセントで操作する場合）があるとのことです。

detail::details-contetn{
  overflow: hidden;
  height: 0px;
  transition: height 1s;
}

details[open]::details-content{
  height: calc-size(auto, size);
}

detail::details-contetn{

overflow: hidden;

height: 0px;

transition: height 1s;

}

details[open]::details-content{

height: calc-size(auto, size);

}

calc-size()関数は、Chrome 129でサポートされています。詳しくは、下記をご覧ください。

CSSの新しい関数がすごく便利！ Chrome 129で追加されたCSSの2つの新機能とアップデートされた3つの機能

カスタムプロパティの問題を回避するfirst-valid()関数

first-valid()という新しい関数が導入されました。値のリストを関数に渡すというもので、値が解決され、最初に有効なものが使用されます。これはCSSのカスタムプロパティを扱うときに役立ちます。

CSSで変数を操作するときに問題になるのは、宣言内では実際に含まれる値が有効でなくても有効な値とみなされることです。フォールバック値を設定しても役に立たず、フォールバック宣言も無視されます。

first-valid()関数を使用すると、すべてのフォールバック宣言を一つにまとめることでコードを単純化できます。

/* no background */
div{
  --a: 20px;
  --b: blue;
  background: red;
  background: var(--a);
}

/* Blue background */
div{
  --a: 20px;
  --b: blue;
  background: red;
  background: first-valid(var(--a), var(--b)));
}

/* no background */

div{

--a: 20px;

--b: blue;

background: red;

background: var(--a);

}

/* Blue background */

div{

--a: 20px;

--b: blue;

background: red;

background: first-valid(var(--a), var(--b)));

}

比率の新しい表記法*-mix()関数

さまざまな*-mix関数をを単純化するために使用できる新しい関数mix()も導入されています。色を混ぜたいですか？ color-mix(red 60%, blue)のようにしたり、もっと単純にmix(60%, red, blue)と設定することもできます。また色だけでなく、長さや変換関数なども混ぜることができます。

この表記法は他の*-mix系列の関数にも拡張されています。

calc-mix()
color-mix()
cross-fade()
palette-mix()

div{
  color: mix(70%, red, blue);
}

div{

color: mix(70%, red, blue);

}

コンテナ内の進行比率を計算できる*-progress()関数

*-progress()関数は、開始値から終了値までの与えられた値の比例的な進行を表します。結果は0と1の間の数値で、演算に使用することもできます。また、前述の*-mix関数と組み合わせると特に便利です。

このファミリーには 3 つの関数があります。

progress(): 汎用的な数学関数
media-progress(): メディア機能用
content-progress(): コンテナクエリ用

progressパラメータ（最初のパラメータ）にイージング関数が指定されていない場合、デフォルトでlinearが適用されます。

div{
  width: calc(100% * progress(50px from 0px to 100px));
}

div{

width: calc(100% * progress(50px from 0px to 100px));

}

ランダムな値を返すrandom()関数

楽しいデザインにはある程度のランダム性があり、それはCSSには欠けていました。しかし、範囲内からランダムな値を返すrandom()関数、リストからランダムな値を返すrandom-item()関数の2つが新しく導入されます。

ランダムな値を使用するために、面倒なハックやテクニックは必要なく、他の言語に依存する必要もありません。構文も単純で、セレクタや要素によって乱数を計算することもできます。

.random{
  width: random(100px, 300px);
  height: random(100px, 300px, by 50px);
  background: random-list(--c, red, green, blue);
}

.random{

width: random(100px, 300px);

height: random(100px, 300px, by 50px);

background: random-list(--c, red, green, blue);

}

兄弟の数や順序を返すsibling-*()関数

コンテナ内の順序に応じて各要素に異なるスタイルを適用したい場合はありませんか。残念ながら、CSSではカウンターをそのように使用することができません。

数値を返す2つの新しい関数が導入されます。sibling-count()とsibling-index()を使用することで、その障害は取り除かれます。

sibling-count(): 兄弟の数を返します。
sibling-index(): 兄弟リスト内の要素の位置・順序を返します。

この新しい関数を使用することで、各要素にカスタムプロパティを設定したり、nth-childで個別セレクタを設定する必要はなくなります。

div{
  width: calc(100% / sibling-count());
  height: calc(sibling-index() * 100px);
}

div{

width: calc(100% / sibling-count());

height: calc(sibling-index() * 100px);

}

ネストされた要素をスタイルするtoggle()関数

ネストされた要素に値を定義する便利な新しい関数が導入されます。toggle()関数は、要素とその子孫が循環する値を設定し、コードを大幅に簡素化します。複雑な記述や再定義はもう必要ありません、1行のコードで済みます。

たとえば、4つのネストされたレベルを持つリストがあるとします。奇数のレベルはdiscの丸にし、偶数のレベルはsquareの四角にします。レベルごとにul > li ul > li ul > li ul { ... }と記述したり、ul {list-style-type: disc, square;}と記述することもできます。

この関数で気になる点は、その名前です。私だけかもしれませんが、「toggle」という単語には「二重性」という意味合いがあります。オン・オフ、イエス・ノーのように2つの値が互いに切り替わります（トグル）。toggle()関数は必要な数のパラメータを含めることができるため、「toggle」という名前には違和感があります。

ul{
  list-style-type: toggle(disc, circle, square);
}

ul{

list-style-type: toggle(disc, circle, square);

}

カンマ区切りの曖昧さを避けるための新しい表記法

ここまで記事を読んだ人はお気づきかもしれませんが、新しい関数（random()やtoggle()など）にはカンマ区切りの値のリストを引数にするものがあります。

その場合、引数と次の引数をどのように区別すればよいでしょうか。これが「comma upgrading」が提案されている理由です。つまり、カンマ（,）の代わりにセミコロン（;）を使うことで、パラメータを明確に区切ることができるというものです。

たとえば、CSSでfont-familyで異なるオプションも設定したいとします。

Times, serif
Arial, sans-serif
Roboto, sans-serif

上記の引数はすべて、カンマ区切りされた値のリストです。もしカンマで引数を区切っていたら、非常に混乱します。しかし、新しい表記法を使用すると、1つの引数が終了し、次の引数が始まる場所を簡単に識別できます。

.random-font {
  font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);
}

.random-font {

font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);

}

位置を示す論理プロパティ

CSSにはすでにmargin, padding, borderなどの論理プロパティがあり、値はテキストの方向（writing-mode）に対して相対的な値を使用できます。

そして「position type」が導入されます（positionプロパティと混同しないでください）。位置を示すプロパティ（background-positionやobject-positionなど）でテキストのフローと方向に対して相対的な値を指定できます。

使用できる値は、下記の通りです。

x-start
x-end
y-start
y-end
block-start
block-end
inline-start
inline-end

div{
  background: conic-gradient(blue, red);
  background-potision: left 15px block-end 30px;
}

div{

background: conic-gradient(blue, red);

background-potision: left 15px block-end 30px;

}

終わりに

この記事で紹介したCSSの新しい機能はまだ初期段階であり、状況は変化しますが、CSS Values and Units Module Level 5に含まれている新機能は非常に期待できるものです。特に、任意の属性を任意のプロパティで使用できるのは待ち望んでいた機能です。

詳細と情報についてはCSS Values and Units Module Level 5を確認することを忘れないでください。

楽しい (CSSの) 実験とコーディングを!

最近リリースされたCSSの新機能と新しい関数のまとめ

はじめに

attr関数の変更

キーワードで計算できるcalc-size()関数

カスタムプロパティの問題を回避するfirst-valid()関数

比率の新しい表記法*-mix()関数

コンテナ内の進行比率を計算できる*-progress()関数

ランダムな値を返すrandom()関数

兄弟の数や順序を返すsibling-*()関数

ネストされた要素をスタイルするtoggle()関数

カンマ区切りの曖昧さを避けるための新しい表記法

位置を示す論理プロパティ

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

最近リリースされたCSSの新機能と新しい関数のまとめ

はじめに

attr関数の変更

キーワードで計算できるcalc-size()関数

カスタムプロパティの問題を回避するfirst-valid()関数

比率の新しい表記法*-mix()関数

コンテナ内の進行比率を計算できる*-progress()関数

ランダムな値を返すrandom()関数

兄弟の数や順序を返すsibling-*()関数

ネストされた要素をスタイルするtoggle()関数

カンマ区切りの曖昧さを避けるための新しい表記法

位置を示す論理プロパティ

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info