www.webdeveloper.com
Results 1 to 7 of 7

Thread: Is opacity acceptable?

  1. #1
    Join Date
    Feb 2006
    Posts
    13

    Is opacity acceptable?

    I recently discovered that you can make elements that have an opacity setting - sounds great for creating graphics-based highlighting buttons and some interesting designs I've running around in my head.

    My question, which I've not found the answer to by either searching this forum or the internet in general, is this: Is it acceptable to use? As far as I've learned, it's supported in all browsers except the old versions of Opera. I can't find a straight answer if it's valid by w3c standards, other than it wasn't valid in '05.

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The official opacity tag is

    opacity:0.5;

    This is part of the standards and is understood by all browsers released in the last couple of years.

    For earlier Mozilla browsers use

    -moz-opacity:0.5;

    For earlier Safari and Konqueror browsers use

    -khtml-opacity:0.5;

    These are also according to the standards since they have the appropriate standards extension qualifiers on the front.

    For Internet Explorer you need to use

    filter:alpha(opacity=50);

    Note that this entry is not according to the standards since Microsoft omitted the -ie- off of the front that would identify it as a valid browser specific extension.
    Also note that while the first three specify an opacity level between 0 and 1 the IE versionspecifies a level between 0 and 100.
    Stephen

  3. #3
    Join Date
    Feb 2006
    Posts
    13
    Yeah, I was going to edit in a quick example I made:

    Example here.

    I used the opacity & filter:alpha tags. Should I add in the -khtml-opacity tag for early Konqueror/Safari support?

    One of my ideas was to use this to define a text/menu/ect area - I've since found it also fades out any text in the <div>. I like the demos I've seen using this effect to create highlight on hover. I've also found examples of using java and opacity to create fade-ins/outs (found that in a post here & elsewhere). Definitely one to add to the bag of tricks.

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,248
    Quote Originally Posted by felgall
    The official opacity tag is

    opacity:0.5;

    ...
    Note that "opacity" is not part of the CSS 2.1 standard. It is part of the CSS 3 "under construction" standard, and is part of the CSS3 Color Module which is still in "Candidate Recommendation" level, leaving it two more steps in the process before it becomes a "Recommendation". (And at the rate things have moved with CSS3, who know when that will happen, if ever.)

    This does not mean you cannot use it (utilizing all the info Fellgal kindly supplied), just note that it will not validate as CSS2 compliant CSS (see validator result), and since it's not truly "standard" you probably should design your layout such that it is still readable if the opacity is not implemented by a given client.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  5. #5
    Join Date
    Feb 2006
    Posts
    13
    I figured as much, since I'd never heard of anyone using it before.

    Oh well, I guess it's back to putting the effect into the background image. blah.

  6. #6
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    It may only be a candidate for inclusion in CSS3 but all modern browsers have already implemented it. This means that the standard is running behind the browsers in this instance rather than the other way around as is usually the case. Since it is already implemented I think it is therefore guaranteed to be included in the final version of the standard.

    You wont get the code to pass validation regardless of which standards level you validate against because the IE version is non-standard anyway.

    Still if you include all 4 versions then you will get the opacity to implement in all browsers that support it (the most recent version that wont is Opera 8).
    Stephen

  7. #7
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Quote Originally Posted by rWagz
    I used the opacity & filter:alpha tags. Should I add in the -khtml-opacity tag for early Konqueror/Safari support?
    Yes, add it to support Safari 1.1 through 1.3.

    Quote Originally Posted by felgall
    It may only be a candidate for inclusion in CSS3 but all modern browsers have already implemented it. This means that the standard is running behind the browsers in this instance rather than the other way around as is usually the case. Since it is already implemented I think it is therefore guaranteed to be included in the final version of the standard.
    I agree.

    Quote Originally Posted by felgall
    Still if you include all 4 versions then you will get the opacity to implement in all browsers that support it (the most recent version that wont is Opera 8).
    I haven't tested this in iCab 3 yet, but I know that Konqueror doesn't support opacity or -khtml-opacity yet.

    Quote Originally Posted by NogDog
    Note that "opacity" is not part of the CSS 2.1 standard. It is part of the CSS 3 "under construction" standard, and is part of the CSS3 Color Module which is still in "Candidate Recommendation" level, leaving it two more steps in the process before it becomes a "Recommendation".
    CSS2.1 currently has working draft status.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles