{"id":43,"date":"2010-12-13T20:16:55","date_gmt":"2010-12-14T01:16:55","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:16:55","modified_gmt":"2010-12-14T01:16:55","slug":"rgba","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/rgba\/","title":{"rendered":"rgba"},"content":{"rendered":"\n<p><code>rgba<\/code> is well-covered in all modern browsers, and can be achieved in all IEs with a combo of a <code>filter<\/code> for IE6\/7 and <code>-ms-filter<\/code> for IE8.<\/p>\n<p>The filter approach is a little bit tricky because it uses the Gradient filter, which requires your RGBa colors to be passed as converted as <abbr title=\"Alpha Red Green Blue\">ARGB<\/abbr> colors, which means <code>rgba(123,123,123,.5)<\/code> needs to be <code>#7F7B7B7B<\/code> (yes, there are 8 digits, as in: #AARRGGBB)&#8230;  Luckily, <a href=\"http:\/\/kilianvalkhof.com\/2010\/css-xhtml\/how-to-use-rgba-in-ie\/\">Kilian Valkhof has created an RGBa-to-ARGB converter<\/a> for you!<\/p>\n<p>I have also found a solution that uses PHP to create a PNG image that can be repeated as a background-image.  Slick, but more work than I could be bothered testing, so&#8230; <a href=\"http:\/\/leaverou.me\/2009\/02\/bulletproof-cross-browser-rgba-backgrounds\/\">give it a go<\/a> if you want!<\/p>\n<h2>The Options<\/h2>\n<ul>\n<li>\n<h3><a href=\"internet-explorer-filters\">Internet Explorer Filter<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Pure, valid CSS, no JS, no HTC, no tricks, no hacks!<\/li>\n<li>IE8 offers vendor prefix (-ms).<\/li>\n<li>IE6\/7 use non-proprietary <code>filter<\/code>, so can easily put that into IE-only stylesheet.<\/li>\n<li>Easy to target specific browser versions if using HTML5 Boilerplate <code>&lt;head&gt;<\/code> conditional comments.<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>Having to convert RGBa to ARGB?  That&#8217;s a pretty big &#8220;con&#8221; to me, even with the converter&#8230;<\/li>\n<li><code>filter<\/code> is invalid, so stylesheets will not validate, if you care about that.<\/li>\n<li>At least one more line of CSS for each feature&#8230;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The Bottom-Line<\/h2>\n<p>I was completely ready to give this to eCSStender, because the filter has to convert the RGBa, but eCSStender completely destroyed the text inside the box&#8230;  So, I guess we&#8217;re back to filters&#8230;  At least there&#8217;s a converter, right?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>rgba is well-covered in all modern browsers, and can be achieved in all IEs with a combo of a filter for IE6\/7 and -ms-filter for IE8. The filter approach is a little bit tricky because it uses the Gradient filter, &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/rgba\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}