{"id":41,"date":"2010-12-13T20:16:26","date_gmt":"2010-12-14T01:16:26","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:16:26","modified_gmt":"2010-12-14T01:16:26","slug":"opacity","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/opacity\/","title":{"rendered":"opacity"},"content":{"rendered":"\n<p><code>opacity<\/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>Note that <code>opacity<\/code> cascades to all elements within the element you&#8217;re styling.  Meaning, if you set a <code>div<\/code> to have a 50% opacity, everything inside of that <code>div<\/code> will <em>also<\/em> have 50% opacity; and there is no way to give something 150% opacity to force it back&#8230;<\/p>\n<p>If what you&#8217;re looking to do is create a semi-transparent background, see the section on <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/rgba\/\"><code>rgba<\/code><\/a>.<\/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 the 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><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<li>\n<h3><a href=\"ecsstender\">eCSStender<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Eliminates need for IE Filters<\/li>\n<li>Extensions are modular, so you can (more-or-less) only add the features you need for each page.<\/li>\n<li><s>This extension also handles <code>rgba<\/code> and <code>hsla<\/code>, so if you plan to use those on the same page, this is already there.<\/s><br \/>\n<aside>I found the <code>rgba<\/code> and <code>hsla<\/code> portions of the extenstion completely unreliable, so would not recommend using them.<\/aside>\n<\/li>\n<li>Open-source, so limited <a href=\"http:\/\/ecsstender.org\/extensions\">extensions<\/a> will hopefully grow if this catches on (or you could build your own!).<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>If added to a site, all browsers get the additional weight (eCSStender Core is 18.8kb, and the extension is 3.86kb, minified).<\/li>\n<li>Somewhat expensive, as it examines every rule on every stylesheet on the page, comparing each to whatever extensions are available.<\/li>\n<li>Implementation requires JS; without JS, nothing happens.<\/li>\n<li>Extensions are still somewhat limited (though they do cover probably the most common CSS3 features).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The Bottom-Line<\/h2>\n<p>I would say pure CSS (meaning IE filters) is always the way to go, but IE Filters will break validation.  eCSStender validates, which is great, but also adds more weight to <strong>all<\/strong> browsers (not <em>just<\/em> those that need the help).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>opacity 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. Note that opacity cascades to all elements within the element you&#8217;re styling. Meaning, if &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/opacity\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-41","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/41","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=41"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}