132
74

More than 1 year has passed since last update.

CSSの `rgba` はもう古い

Last updated at Posted at 2023-04-05

さっき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 記法を見つけて勝手につけてくれるらしい。さすが、やるな。

132
74
10

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
132
74