[Chrome 139]CSSの新機能について
2025年8月5日にchrome139がリリースされました。
新たに対応されたcssも多くあり、今回はそんな機能をご紹介いたします。
CSS カスタム関数
大きな違いとして、特に注目の集まっている機能がこのカスタム関数です。
既存のlight-dark()関数では、color値以外を取り扱うことができませんでした。
新たに対応したカスタム関数は、CSSでオリジナルの関数を定義できるというものです。
/* ユーザー定義関数で動的に幅を計算 */
@function calculate-width($value1, $value2) {
@return $value1 + $value2;
}
/* 関数を使ってボックスの幅を設定 */
.box {
width: calculate-width(50px, 30px); /* 結果は80px */
}
ＣＳＳの自由度が年々向上していくのを肌で感じます。
こうした機能が充実していくと、完全にcssだけでwebサイトの作成も可能になりそうですね。
corner-shape
個人的に試してみたい機能No1です。
既存のborder-radiusでは対応できなかった対象の角調整ができるスタイルです。
border-radiusでは四隅の角度を数値で指定することができましたが、corner-shapeでは四隅+複雑な形での切り抜きができる機能となっています。
round :従来通りの円弧または楕円弧
squircle :直角と円弧の中間の形状
square :直角 ※border-radiusを打ち消せる
bevel :角を斜形に切り取った形状
scoop :角をスコップですくい取った様な形状
notch :角を直角に切り取った形状
superellipse() :角の丸め具合を指定
今まで擬似要素やmaskなどを使って作っていた形をこのスタイル一つで適応できるのはとても便利です。
ただ、残念ながら主要ブラウザではまだ未対応なため、本格的に利用できるのはもう少し先になりそうです。
デバイス上のWeb音声API
Web Speech APIにデバイス上の音声認識サポートが追加されました。
簡単に言うと、ネット経由しなくても音声認識できるようにして、必要ならその仕組みをインストール案内し、ユーザーが安全重視（端末内）か利便性重視（クラウド）かを選べるようになるというもの。
公共機関や公的なwebサイト上にはよくある音声読み上げの機能。ブラウザ上で、機能の切り替え自体ができるようになり、また一つ便利になりました。
昨今、Webサイトにおけるアクセシビリティの重要性はますます高まっています。
そうした需要の中、利用者が安心して使用できるwebサイト制作として意識していきたい項目です。
まとめ
ここで取り上げた以外にも、更新・修正が入っているので、リリースノートを見てみると発見があるかもしれません。
また、今回の対応は主要ブラウザがすべて対応しているわけではありませんが、便利な機能がどんどん増えています。
特にカスタム関数などはcssのあり方自体の変化につながりそうです。今後も技術進化のスピードについていけるよう勉強していきたいです。
参考リンク
@Frencel_ns お問い合わせ
ご覧いただきありがとうございます。
当メディアへのご質問や各事業部へのお仕事のご相談がありましたら、お気軽にお問い合わせください。
修行中の身です。