8 Replies Latest reply on May 10, 2010 2:13 PM by jyeager11

    Proper syntax to modify opacity?

    jyeager11 Level 1

      For years, I've been using the following 3 lines of code whenever I've needed to make a div or image semi-transparent.

       

          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
          opacity: 0.8;
          -moz-opacity: 0.8;

       

      I remember there was a reason why all 3 lines were necessary (one was for IE, the other FF, and I forget the third).

       

      My question is... are all 3 lines still necessary to ensure maximum compatibility? Or has either of the lines become obsolete in today's environment?

       

      Thanks.

        • 1. Re: Proper syntax to modify opacity?
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          you could look/use at the source code of my semi English/German example:

          http://www.goldschmiede-blumberg.de/AdobTest/LayerE.php

           

          Hans-G.

          • 2. Re: Proper syntax to modify opacity?
            martcol Level 4

            From what I have read, until support for CSS 3 takes a hold you should stick with what you know.

             

            Martin

            • 3. Re: Proper syntax to modify opacity?
              jyeager11 Level 1

              hans-g. wrote:

               

              Hi,

               

              you could look/use at the source code of my semi English/German example:

              http://www.goldschmiede-blumberg.de/AdobTest/LayerE.php

               

              Hans-G.

              Why are you sending me to an example that doesn't work in Mozilla/Firefox? This only works in IE.

               

              Perhaps it's you who should be using the example I provided. ;-)

              • 4. Re: Proper syntax to modify opacity?
                hans-g. Adobe Community Professional & MVP

                Hi,

                 

                shall we really start again the unnecessary, unproductive discussion? I'm really amused about the FF users, which are satisfied with the standard and search the errors in DW! Poor FF users cause they need an IE AddOn!You have to use it, and all is ok!

                 

                ... and dear FF people: you shouldn't bite the hand that feeds you!

                 

                Hans-G.

                • 5. Re: Proper syntax to modify opacity?
                  jyeager11 Level 1

                  hans-g. wrote:

                   

                  Hi,

                   

                  shall we really start again the unnecessary, unproductive discussion? I'm really amused about the FF users, which are satisfied with the standard and search the errors in DW! Poor FF users cause they need an IE AddOn!You have to use it, and all is ok!

                   

                  ... and dear FF people: you shouldn't bite the hand that feeds you!

                   

                  Hans-G.

                   

                  Whoa, overreact much?

                   

                  You want to talk unnecessary and unproductive? How about starting by reading the OP before you dispense your IE-only wisdom?

                   

                  The original question asked if the following 3 lines of code were still relevant today :

                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
                  opacity: 0.8;
                  -moz-opacity: 0.8;

                  It even specifically asks :

                  are all 3 lines still necessary to ensure maximum compatibility?

                  So clearly, ensuring maximum compatibility is desired.

                   

                  Then YOU reply...

                  you could look/use at the source code of my semi English/German example:

                  http://www.goldschmiede-blumberg.de/AdobTest/LayerE.php

                  Which uses "filter:alpha(opacity=30)" as a method, and didn't even show up in my FF3 browser. In fact, until I looked at the source code, I was wondering why you were sending me to this page, because everything is 100% opaque in my browser.

                   

                  Kindly and without malice, I suggested that you use the method I've been using, and quoted in the OP.

                   

                  This method, which involves adding only a few characters more to your existing style, ensures the same effect across both IE and FF.


                  And you respond with this anti-FF nonsense?

                   

                  Dude, it's one thing to not want to waste any additional time looking for FF-compatibly solutions, given the small number of FF users out there. I get that part. However, it's another thing entirely to go out of your way to make sure your site DOESN'T work on FF, simply because of your irrational spite towards Mozilla.

                   

                  The time it took you to insult FF and everyone using it, you could have made your site FF-compatible.

                   

                  I guess we all have different priorities, huh?

                   

                  Achtung!

                  • 6. Re: OT: Proper syntax to modify opacity?
                    hans-g. Adobe Community Professional & MVP

                    Hi,

                     

                    wir die Anwender müssen uns doch nicht darüber den Kopf zerbrechen ob DW mit FF, IE oder was weiss ich kompatibel ist, dafür sind doch die Macher der jeweiligen Programme zuständig!

                     

                    Und noch einmal, warum muss FF ein AddOn anbieten?

                     

                    ABER: Warum tun wir uns nicht zusammen und sorgen dafür, dass wir diese Diskussion gar nicht führen müssen?

                     

                    Hans-G.

                    • 7. Re: Proper syntax to modify opacity?
                      John Waller Adobe Community Professional & MVP

                      According to discussion here, you can drop the -moz-opacity reference:

                      http://www.impressivewebs.com/css-opacity-reference/

                      • 8. Re: Proper syntax to modify opacity?
                        jyeager11 Level 1

                        John Waller wrote:

                         

                        According to discussion here, you can drop the -moz-opacity reference:

                        http://www.impressivewebs.com/css-opacity-reference/

                        Exactly the information I was looking for.

                         

                        In the interests of streamlining my CSS files, I will remove -moz-opacity, and fall back on the other two lines going forward.

                         

                        Thanks, John!