Merge pull request #290 from cybozu/2024-10-mugi

add mugi part

src/content/posts/2024/10.md

@@ -27,9 +27,27 @@ guest:
 
 - 共有者:
 
-### []()
+### [New Values and Functions in CSS](https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS)
 
-- 共有者:
+- 共有者: @mugi_uno
+
+2024 年 9 月に W3C より 公開された CSS Values and Units Module Level 5 の Working Draft の内容について、新たに追加された機能についてピックアップして紹介している記事です。従来の CSS では複雑な記述が必要だったものが簡潔に表現できたり、不可能だったことが可能になっていたりと、注目したい機能が多く含まれています。
+
+中でも自分が特に気になったものを幾つか紹介します。
+
+#### `calc-size()`
+
+従来でも `calc()` を使うことで計算結果を元にしたサイズを利用できましたが、[Intrinsic Size](https://developer.mozilla.org/ja/docs/Glossary/Intrinsic_Size)(内在サイズ)を元にした計算は不可能でした。具体的には、`auto`・`min-content`・`max-content`・`fit-content`などです。
+
+一方、`calc-size()` では、Intrinsic Size を元にした計算ができます。代表的な利用例としては、アコーディオンメニューの開閉アニメーションで、開閉後の高さを `auto` のままアニメーション可能になったりします。
+
+#### `random()` `random-item()`
+
+`random()` は指定した範囲内からランダムな値を返します。たとえば `random(100px, 300px, by 50px)` とした場合、100px・150px・200px・250px・300px のうちいずれかを返します。一方、`random-item()` はリスト内からランダムでピックアップします。 `random-item(100px, 200px, 500px)` は、100px・200px・500px のいずれかを返します。従来 CSS 単体で乱数を扱うことはできなかったため、可能性が広がる機能ですね。
+
+#### `sibling-count()` / `sibling-index()`
+
+`sibling-count()` は兄弟要素の数を返し、`sibling-index()` は兄弟要素のうち自身のインデックスを返します。たとえば、grid レイアウトにおいて兄弟要素数に応じて columns の数を分割したいケースや、兄弟要素の中で自分が何番目に位置するかによってスタイルを変えたいケースなどで活用できます。
 
 ### []()