{"id":5376,"date":"2010-01-25T06:27:04","date_gmt":"2010-01-25T13:27:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5376"},"modified":"2010-01-25T06:28:10","modified_gmt":"2010-01-25T13:28:10","slug":"ie-background-rgb-bug","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/ie-background-rgb-bug\/","title":{"rendered":"IE Background RGB Bug"},"content":{"rendered":"

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock<\/a>. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get a solid color version:<\/p>\n

div {\r\n   background: rgb(200, 54, 54); \/* The Fallback *\/\r\n   background: rgba(200, 54, 54, 0.5);\r\n}<\/code><\/pre>\n
The above works just fine, however Dan Beam<\/a> alerted me to an interesting bug\/quirk with this in IE 6 & 7 (fixed in IE 8). See example<\/a>.<\/p>\n
<\/p>\n
The situation is that the RGB fallback color only works when using shorthand<\/strong>. If you were to declare the fallback color like this:<\/p>\n
div {\r\n\tbackground-color: rgb(255,0,0);\r\n\tbackground-color: rgba(255,0,0,0.5);\r\n}<\/code><\/pre>\n
Using the background-color<\/tt> property only, it will fail and display no background color at all. <\/p>\n
\n\"\"
\nThe above image is from IE 7. Using the shorthand (top) succeeds while the non-shorthand (bottom) fails.\n<\/div>\n
Solution<\/h3>\n
Using RGB for a fallback is nice. It’s no-brainer work because all you have to do is duplicated the RGBa value, remove the “a” and remove the 4th (opacity) parameter. If you want to keep using RGB as a fallback, just remember to set it using shorthand (if possible), or set the fallback using regular HEX codes or keywords.<\/p>\n
In the example<\/a>, the result of 50% red is a light red anyway, so using a hex code to specify that value might be a more appropriate fallback color anyway.<\/p>\n
div {\r\n  background-color: #fd7e7e;\r\n  background-color: rgba(255,0,0,0.5);\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":2151,"url":"https:\/\/css-tricks.com\/rgba-browser-support\/","url_meta":{"origin":5376,"position":0},"title":"RGBa Browser\u00a0Support","date":"May 19, 2010","format":false,"excerpt":"This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this: div { background: rgba(200, 54, 54,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/rgbaexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6565,"url":"https:\/\/css-tricks.com\/yay-for-hsla\/","url_meta":{"origin":5376,"position":1},"title":"Yay for\u00a0HSLa","date":"June 15, 2010","format":false,"excerpt":"Huge sogging longbottoms? High strength low alloy steel? NOPE, we're talking Hue, Saturation, Lightness, and alpha, and it's a way of declaring color in CSS. It looks like this: #some-element { background-color: hsla(170, 50%, 45%, 1); } It is similar to RGBa in that you declare three values determining the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/hsl.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254332,"url":"https:\/\/css-tricks.com\/css-custom-properties-theming\/","url_meta":{"origin":5376,"position":2},"title":"CSS Custom Properties and Theming","date":"May 1, 2017","format":false,"excerpt":"We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311311,"url":"https:\/\/css-tricks.com\/the-expanding-gamut-of-color-on-the-web\/","url_meta":{"origin":5376,"position":3},"title":"The Expanding Gamut of Color on the Web","date":"May 27, 2020","format":false,"excerpt":"CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS \u2014 whether defined with the RGB, HSL, or hexadecimal format \u2014 catered to the monitors of the time, all within the sRGB colorspace. Most newer\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/color-gamut.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5700,"url":"https:\/\/css-tricks.com\/css3-gradients\/","url_meta":{"origin":5376,"position":4},"title":"CSS\u00a0Gradients","date":"March 3, 2014","format":false,"excerpt":"Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/safariloadsgradient.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3118,"url":"https:\/\/css-tricks.com\/text-blocks-over-image\/","url_meta":{"origin":5376,"position":5},"title":"Text Blocks Over Image","date":"July 27, 2009","format":false,"excerpt":"Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/textoverimageexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5376"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5376"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5376\/revisions"}],"predecessor-version":[{"id":5399,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5376\/revisions\/5399"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}