Safari 10.0 で CSSカラーフォーマット #RGBAと#RRGGBBAAがサポートされた!

こんにちは、UI デザイナーの清田です。 Safari 10.0 から CSSのカラープロパティに#RGBA形式と#RRGGBBAA形式の指定がサポートされたので検証してみました。

Support for #RGBA and #RRGGBBAA

Safari accepts #RGBA and #RRGGBBAA color values as described in the CSS Color Level 4 specification.

引用 : What's New in Safari

#RGBA

RGBAの各頭文字について、皆さんご存じのRGBのカラーモデルに不透明度(Alpha)を指定できるようになったことを意味します。

• R(Red)
• G(green)
• B(blue)
• A(alpha)

CSS のコード

.rgba-exampl {
    background-color : rgba(0,0,255,1);
}

実機でチェック

#RRGGBBAA

前項にてRGBA形式でカラー指定ができるようになることが検証できましたが、 実際の制作現場ではRGB形式のカラー指定は、拝見することが少なく(最近は増えて来ている傾向)、以前より主流のHEX値（16進数）の6桁のカラー指定ではないでしょうか。HEX値のカラー指定に不透明度の値を記述できるようになりました。

• HEX値（16進数）+ 不透明度（16進数）

CSS のコード

.rrggbbaa-exampl {
  background-color: #0000ff59;
}

実機でチェック

お！16進数で指定したアルファ値の指定が反映されてるのが確認できました。ちょっとびっくり。

まとめ

RGBA形式のカラー指定は、拝見することはあれど、#RRGGBBAA形式での指定は見かけることはありませんでした。
CSSで表現できる幅が広がり過ぎて、ちょっと追えなくなってきています(汗)。

Safari 10.0 にて新たにCSSプロパティが何点かサポートされた項目があるますので、追いかけていければと思います。