さっきMDNを読んでてびっくりしたんだけど、 rgba の記法はもう古い(legacy)らしい。
Note: The legacy rgba() syntax is an alias for rgb(), accepting the same parameters and behaving in the same way.
rgb 記法でアルファも指定できるから、 rgba はもういらないよってことらしい。
さらに驚愕の事実。
rgb 記法であっても、カンマ区切りでパラメータを並べるスタイルは古いらしい...。
Legacy syntax: comma-separated values
例えば、 rgb(255, 0, 0, 0.5) ってやつね。これは古い。
イマドキのやり方は rgb(255 0 0 / 0.5) のようにスペース区切りにするらしい。
alphaの指定の前には / がいるんだって。へ〜。
さらにさらに、rgbの各値には整数以外に、 50% などの指定もできるらしい。
よって、まとめると、ナウなヤングは↓のように書く(MDNから引用)。
rgb(31 120 50)rgb(30% 20% 50%)rgb(255 122 127 / 80%)rgb(255 122 127 / .2)
2023-10-07、ちょっとハマったので追記。
整数表記とパーセント表記は混ぜれないらしい。
例えば、 rgb(0 0 100%) とかはダメ。
MDNのFormal syntaxの欄をよく読むと、たしかに混ぜれないようになってる↓。
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? ) |
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
[ <percentage> | <number> | none ]{3} とかにはなってないね。気をつけよう。
余談1: . から始める数値の書き方
見慣れねえなと思ったけど、仕様書に記載があった。正式な書き方らしい。
When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits;
『zero or more decimal digits followed by a dot』って言ってるので、
. の前の数字は0個(省略)でも良いようだ。
余談2: Qiitaで rgb 記法を書くとカラーマーカが付与される
多分、この記事を見てる人は、 rgb 記法の右隣りに色のついた四角(カラーマーカ)が見えてると思う。
これはQiitaがMarkdown中の rgb 記法を見つけて勝手につけてくれるらしい。さすが、やるな。