Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

Anything Goes: validating opacity

Bottom of Page

1 to 9 of 9

  1.  
    • CommentAuthorGus
    • CommentTimeOct 24th 2007
     permalink
    Having a problem getting some opacity css to validate on a new site I created (using Drupal and based on the hunchbaque theme).

    http://www.whatpricedidyouchoose.com

    (opacity css is used on image links)

    googling suggests using jscript which I'm trying to avoid.

    Any ideas?

    And any critiques of the css/layout welcome.
    •  
      CommentAuthorTetsuo
    • CommentTimeOct 24th 2007 edited
     permalink
    There isn't a way of validating CSS opacity unfortunately, because many browsers require different hacks to get it working.
    Until the consensus CSS3 definition is implemented in all browsers, it will (correctly) remain an invalid style.

    Having looked at your code, you are using the opacity for your links, which I would strongly suggest isn't neccessary - just use different colour values for hover states instead.
    • CommentAuthorPettyRider
    • CommentTimeOct 27th 2007
     permalink
    Validation is a tool, not a badge. You gain nothing by getting your opacity rules to validate. Nothing at all. Focus on results, not checkmarks
    • CommentAuthorGus
    • CommentTimeOct 28th 2007
     permalink
    thanks PettyRider...

    I agree about validation being a tool (not a badge), but, some clients tend to insist on it....along with those WCAG Level 1,2,3 accesibility tests.

    As it happens, the client for that Radiohead survey site wasn't insistent but I try to make sure the site is tidy from a validation point of view anyway, when I can and time allows. So, in that context, I find validation tools very useful for highlighting items I may have overlooked.

    hope that makes sense..and thanks all for the responses.

    Dub
  5.  permalink
    ...I find validation tools very useful for highlighting items I may have overlooked.

    i guess thats why they are called tools :-P

    more on topic. What are these WCAG accesibility tests? i can imagine, but iv never heard of them. Time to start up my wikiwhore engines i guess.

    Also if you do want it to validate you can try some CSS3 Validators such as this one.

    or

    I suggest trying what Tetsuo suggested. Then you know its more likely that everyone sees your site correctly.
    Having looked at your code, you are using the opacity for your links, which I would strongly suggest isn't neccessary - just use different colour values for hover states instead.
  6.  permalink
    Until CSS3 is implemented across browsers I guess it's a decision between opacity or whatever certification compliance.

    And yes since you're not using images changing colors would make more sense.
    • CommentAuthorGus
    • CommentTimeOct 30th 2007 edited
     permalink
    thanks Jugular Bean and others..

    In my case (at the http://www.whatpricedidyouchoose.com site) I was only using opacity with images that are links, so changing the hover colour wouldn't help.

    Anyone who stumbles across this thread searching for a solution to validating opacity...after a lot of googling I would echo what Jugular bean said (i.e. it's a toss up between having opacity without CSS validation or not using opacity at all) and add that I couldn't find any CSS workaround that would pass any validation tests.

    However, I did notice a lot of talk that opacity will be a recognised CSS property soon and I came across a javascript snippet that "hides" the opacity properties from the validation tool. A link to that javascript snippet and explanation is here:

    http://blog.evaria.com/2007/validate-css-style-opacity/

    To Jackinloadup who asked: "What are these WCAG accesibility tests? "

    WCAG = Web Content Accessibility Guidelines - which is part of the The Web Accessibility Initiative (WAI) which develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities.
    They have 3 levels of content accesibility - more details here: http://www.w3.org/WAI/GL/

    Free WCAG (level 1, 2 and 3) online validation tool: http://webxact.watchfire.com/

    Hope that helps others,

    Dub
  8.  permalink
    You are correct it's the only way of validating opacity by using JS script.
    Worked for me in a past.
    something like that
    <script type="text/javascript">
    document.write('<link rel="stylesheet" type="text/css" media="screen" href="../css/moz.css" />');
    </script>

    Cheers, DS
    Thankful People: Gus
    • CommentAuthorGus
    • CommentTimeOct 31st 2007
     permalink
    thanks dmitryseliv...that's an even simpler workaround.

    Dub

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page