CSS グラデーションの新仕様：単色カラーストップの導入
Baseline 2025に、グラデーションを表現するCSS関数であるliner-gradient・radial-gradient・conic-gradientにおいて、単色のカラーストップを持つグラデーションの記法が追加されました。
[css-images-4] Allow gradients with a single color stop and 0-1 positions · Issue #10092 · w3c/csswg-drafts · GitHub
This came up in #10077 but I’m opening a new issue since I proposed a different path but then the change qualifies as substantive. So currently, CSS Images 4 has prose and grammar that disallows si...
github.com
「グラデーションは少なくとも2つの色間の移行を意味する」という従来のCSS Images 4の仕様と、実際には単色グラデーションを実装している主要なブラウザとの間に矛盾が存在していました。
この矛盾を解決するため、単一のカラーストップを許可する以下の利点からCSS Images 4の仕様が更新されました
- CSS の開発体験の向上
- 冗長性の軽減
- 可読性の向上
- 他の記法との独立性
- 特別な文法を導入するなどの欠点がない
- 既存のCSSとの互換性
これにより、linear-gradient(red 0%, red 100%)やconic-gradient(red 0deg, red 360deg)のように記述していた単色のグラデーションは、linear-gradient(red)やconic-gradient(red)のようにより簡潔に記述できるようになります。