2025年11月14日金曜日

[CSS]rgba()のaは要らない

A pragmatic guide to modern CSS colours - part one - Piccalilli
https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/

このエントリの冒頭部分で見ていたのですが、メモ

/* red, 50% opacity */
.red-50 {
  color: rgba(255, 0, 0, 0.5);
}

以前はrgbaと書いていたのが

/* red, 50% opacity - this works*/
.red-50 {
  color: rgb(255, 0, 0, 0.5);
}

rgbだけで済むように(4番目のチャンネル追加が不要に)

また、カンマ区切りは今ではレガシー構文になったので

/* this works */
.red {
  color: rgb(255 0 0);
}

.blue {
  color: hsl(226 100% 50%);
}

スペースで区切ることができます

*ただし、4つ目の値を追加するにはスラッシュ(/)を使用する必要があります

/* full red */
.red {
  color: rgb(255 0 0);
}

/* red, 50% opacity */
.red-50 {
  color: rgb(255 0 0 / 0.5);
}

.hsl-red-50 {
  color: hsl(0 100% 50% / 0.5);
}

まぁMDNにもありますが
rgb() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/color_value/rgb

F(uriouz)

欲しいものリスト / 優先度の高いほしいものリスト / ☕を奢る
Donate 寄付 カンパ サポート Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
詳細プロフィールを表示

0 comments:

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

...

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."