I was just wondering as I been reading and trying to validate my sites to standards, what standard supports this line of CSS
#trans {FILTER: Alpha(Opacity=85); moz-opacity: 0.85; khtml-opacity: .85; opacity: 0.85}
This will take my box and make it somewhat transparent but it is not validated at all.
Just wondering if there was another way of doing this or if this is a no no in webdesign, also, I found a site that mentions CSS3 is this beta or is this out already?
Here is the URL for the site I am working on
<!-- m --><a class="postlink" href="http://www.crystalgage.com/css/test.html">http://www.crystalgage.com/css/test.html</a><!-- m -->
Thanks in advanced!No, I don't think it's that important that you must use it. If you want it more opaque, just make it in Photoshop (if you have Photoshop, that is). Others may disagree, but I don't think you should.You can use it - validation isn't an end in itself. Validation is only a way - just one way - that we can try to make our sites more accessible. Reducing the opacity of an image or a background by 20, or even 50, percent, is rarely going to have any negative impact on accessibility. Any browser that doesn't support it will ignore it, leaving everything perfectly readible, just as long as you code the CSS to degrade gracefully, and it's this that you need to aspire to, rather than just validation.#trans {FILTER: Alpha(Opacity=85); moz-opacity: 0.85; khtml-opacity: .85; opacity: 0.85}
That should be "-moz-opacity: 0.85" (leading hyphen). Not that it matters much, because all recent gecko browsers support the CSS3 "opacity" property that you use later.
I found a site that mentions CSS3 is this beta or is this out already? The W3C don't do "beta" - they mostly don't write software. Their specs have a development cycle which runs:
WD - working draft (work in progress; there will probably be 2 or more WDs)
LC - last call (final working draft, the last chance for people to comment before it gets set in stone)
CR - candidate recommendation (any further changes will only be clarifications. This step is an invitation to software developers to implement the feature(s); test suites will also be produced)
Recommendation (this is now a W3C "standard"; generally this stage is only reached once 2 or more software vendors have attempted to implement it)
Anyhow:
CSS3 is modular - there are actually about two dozen different "modules" of functionality. They are presently at different points in the above cycle.
As far as browser makers and web authors are concerned, there's little point attempting to support/use anything until they reach the CR stage. For CSS3, there are currrently only 7 modules at CR: Selectors, Color, Text, Ruby, Paged, UI and Media.
There's already some browser support for the selectors module, but it's rather patchy, and IE6 hasn't got the hang of most CSS2 selectors yet. Opacity is part of the color module; as pointed out above, recent mozilla-based browsers support opacity; others may do as well (I've no idea what safari/opera do)
see the current work page (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/current-work.html">http://www.w3.org/Style/CSS/current-work.html</a><!-- m -->) for more details.Safari doesn't display it. (at least Safari 1.1 doesn't; I don't know about 1.2 and 1.3)Opera won't display it either.Safari 1.2.4 and FireFox 1.0 for Mac both render correctly.
Opera & Netscape for Mac do not render the transparency.
IE 5.2 for Mac doesn't render the page anything CLOSE to the other browsers (shocking, I know...)
Unfortunately, IE does have the market share... I'd pay special attention to the way in which the code will degrade in non-compatible browsers. Also, Sanim's Photoshop suggestion is a great way to go - offering the effects you're looking for and optimum compatibility (unless you plan on using 24-bit PNGs w/alpha transparency, of course...)I must say thankyou for such a fast reply to my question, what I want to know now is if CSS is such the way to go why is it so hard to code to make it all browser friendly.
Do webdevelopers think this is the way to go and not the developers of the actual browsers themself. There has been several version of most of the browsers after CSS 1 or 2 came out I am assuming why havent they implemented better support?
Thank you so much, I think I am not going to really worry about it, I think I will use the transparentcy if needed. Thanks Alot!Personally, and this is only one opinion, CSS is definitely the way to go. HTML defines content, CSS defines layout/style. The specific effect you're going for is something I would relegate to a pure graphic effect. Take the background photo, create a Photoshop layer and set the color/transparency as desired then save it as a jpg. Code appropriately. That way, it will render exactly the same in every browser - compatibilty is not an issue.
#trans {FILTER: Alpha(Opacity=85); moz-opacity: 0.85; khtml-opacity: .85; opacity: 0.85}
This will take my box and make it somewhat transparent but it is not validated at all.
Just wondering if there was another way of doing this or if this is a no no in webdesign, also, I found a site that mentions CSS3 is this beta or is this out already?
Here is the URL for the site I am working on
<!-- m --><a class="postlink" href="http://www.crystalgage.com/css/test.html">http://www.crystalgage.com/css/test.html</a><!-- m -->
Thanks in advanced!No, I don't think it's that important that you must use it. If you want it more opaque, just make it in Photoshop (if you have Photoshop, that is). Others may disagree, but I don't think you should.You can use it - validation isn't an end in itself. Validation is only a way - just one way - that we can try to make our sites more accessible. Reducing the opacity of an image or a background by 20, or even 50, percent, is rarely going to have any negative impact on accessibility. Any browser that doesn't support it will ignore it, leaving everything perfectly readible, just as long as you code the CSS to degrade gracefully, and it's this that you need to aspire to, rather than just validation.#trans {FILTER: Alpha(Opacity=85); moz-opacity: 0.85; khtml-opacity: .85; opacity: 0.85}
That should be "-moz-opacity: 0.85" (leading hyphen). Not that it matters much, because all recent gecko browsers support the CSS3 "opacity" property that you use later.
I found a site that mentions CSS3 is this beta or is this out already? The W3C don't do "beta" - they mostly don't write software. Their specs have a development cycle which runs:
WD - working draft (work in progress; there will probably be 2 or more WDs)
LC - last call (final working draft, the last chance for people to comment before it gets set in stone)
CR - candidate recommendation (any further changes will only be clarifications. This step is an invitation to software developers to implement the feature(s); test suites will also be produced)
Recommendation (this is now a W3C "standard"; generally this stage is only reached once 2 or more software vendors have attempted to implement it)
Anyhow:
CSS3 is modular - there are actually about two dozen different "modules" of functionality. They are presently at different points in the above cycle.
As far as browser makers and web authors are concerned, there's little point attempting to support/use anything until they reach the CR stage. For CSS3, there are currrently only 7 modules at CR: Selectors, Color, Text, Ruby, Paged, UI and Media.
There's already some browser support for the selectors module, but it's rather patchy, and IE6 hasn't got the hang of most CSS2 selectors yet. Opacity is part of the color module; as pointed out above, recent mozilla-based browsers support opacity; others may do as well (I've no idea what safari/opera do)
see the current work page (<!-- m --><a class="postlink" href="http://www.w3.org/Style/CSS/current-work.html">http://www.w3.org/Style/CSS/current-work.html</a><!-- m -->) for more details.Safari doesn't display it. (at least Safari 1.1 doesn't; I don't know about 1.2 and 1.3)Opera won't display it either.Safari 1.2.4 and FireFox 1.0 for Mac both render correctly.
Opera & Netscape for Mac do not render the transparency.
IE 5.2 for Mac doesn't render the page anything CLOSE to the other browsers (shocking, I know...)
Unfortunately, IE does have the market share... I'd pay special attention to the way in which the code will degrade in non-compatible browsers. Also, Sanim's Photoshop suggestion is a great way to go - offering the effects you're looking for and optimum compatibility (unless you plan on using 24-bit PNGs w/alpha transparency, of course...)I must say thankyou for such a fast reply to my question, what I want to know now is if CSS is such the way to go why is it so hard to code to make it all browser friendly.
Do webdevelopers think this is the way to go and not the developers of the actual browsers themself. There has been several version of most of the browsers after CSS 1 or 2 came out I am assuming why havent they implemented better support?
Thank you so much, I think I am not going to really worry about it, I think I will use the transparentcy if needed. Thanks Alot!Personally, and this is only one opinion, CSS is definitely the way to go. HTML defines content, CSS defines layout/style. The specific effect you're going for is something I would relegate to a pure graphic effect. Take the background photo, create a Photoshop layer and set the color/transparency as desired then save it as a jpg. Code appropriately. That way, it will render exactly the same in every browser - compatibilty is not an issue.