Hey guys,
As I was developing my site, I ran it through W3C Markup validation for CSS and it found the majority of my usage of -moz and -webkit styling whether css3 or not as errors? specifically saying that they do not exist.
Is this because webkit and -moz are not endorsed by W3C or recognised by the validator? Is there anyway I can keep or identify my site as W3C valid and still have those properties as backups in the case that the CSS3 is not supported?
I mean, I am using those browser specific properties properly and they are the only problems in my W3C validation; therefore, isn’t my site valid.
NO, they will not validate. WHY? Because they are NOT valid CSS3 properties. They are – by definition – vendor specific.
In fact, they remain that way for a REASON – the vendor specific prefixes MEAN “for testing only” and “not for use on production websites” – just like the DRAFT part of CSS3 means “not for use on production websites”
All these people jumping the gun trying to deploy a specification not even out of draft that only one browser even bothers using the ACTUAL CSS3 properties for – do yourself a favor and STOP trying to deploy something that won’t be real world deployable for a decade! It’s IE5’s HTML4/CSS2 all over again!
My advice, rip out all the CSS3 nonsense and use the latest recommendations from the W3C for website construction – that’s HTML 4 STRICT or XHTML 1.0 STRICT, and CSS 2.1
You use anything newer and you’re shooting yourself and any client in the foot. The ONLY CSS3 properties you should even be able to come close to using are the ones that used to be IE specific dating back to IE 5 …
Though in a way if you bother writing GOOD cross-browser CSS, even using CSS 2.1 you may occasionally have to say “This doesn’t validate because IE and Firefox are dumbasses” – see zoom:1; and -moz-inline-box respectively. While there is no good excuse for invalid markup – IMHO invalid CSS is pretty much a given regardless of what type you use because of the various hacks and workarounds all the people jumping the gun and deploying HTML4/CSS2 websites for IE5 saddled us with for the decade that followed.
It won’t recognise the propriety vendor-specific extensions as they are not officially part of the CSS recommendations. However, you could create a separate CSS file that had these vendor specific extensions. Though it probably wouldn’t be worth the extra effort or hassle caused by doing so.
Update: I’ve just noticed Jason has already answered the other part of the question about the real-world usage issues while I was typing.
There are some interesting discussions on the use of vendor pre-fixes here.
My take on using them is as mentioned in the reference and as recommended by the w3c in that “Authors should avoid vendor-specific extensions”.
If you must use them then use only properties that will cause no harm if they are broken or missing or the spec changes. Things like border-radius will cause little harm if they don’t work or don’t work properly but don’t use properties that may harm the layout if missing or un-supported.
A lot of the people using vendor prefixes are designers who use them on their own personal sites for experimentation and are constantly maintaining and tweaking the code so changes to the specs are not an issue. It would be foolish to implement multiple vendor prefixes on a client’s production site as that would be asking for trouble.
Remember also that validation is a means to an end and just having a valid sticker on the page means nothing as the code could be valid but at the same time complete and utter nonsense with regard to how its been used.
I apologise if I made it seem like I was using these vendor specific properties on my actual site. I was just testing validation of various sites, not necessarily ones I made, and I noticed that vendor-specific did not validate and I was wondering if this was correct.
Now I know that they do not and will not validate. I am contemplating postponing my use of css3, especially because many of the planned features have not been written in css3, but are in vendor specific css; such as, transitions and animations. Not to mention that only a few the CSS3 properties that are in true CSS are supported in multiple browsers.
However, you could create a separate CSS file that had these vendor specific extensions.
, I believe that when the W3C also checks external files that are linked to determine validation so this would not work.
And thank you Paul for the links and references, I will check them out as soon as my exams are done. I was not a fan of vendor/browser specific prefixes at first because it was so messy. There was webkit, moz, o, khmtl, etc. I believe that I was sucked in by the aiblity to replace javascript and flash with animations.
Anywho,
none of work in CSS3 is planed for real-wrold deployment unless it causes little harm if not supported or has a fallback/failsafe that is not browser/vendor-specific, but CSS 2.1 code, images, or a combination thereof.
There was webkit, moz, o, khmtl, etc. I believe that I was sucked in by the aiblity to replace javascript and flash with animations.
On the one hand, I like the idea of any animations not requiring loading some javascript into my browser… but on the other hand, most of the time I hate animation on a web page and I like having CSS on a web page, so keeping cheeze to javascript means I can have my CSS but block animations by blocking javascript…
I’m torn, you see.
In any case, if the animation is an extra, who cares if it validates/who cares if all the other browsers can’t show it? An extra is an extra. It becomes a problem when that extra gets in the way of page speed or usability, but beyond that…
and I don’t think a single site I’ve built pass CSS validation, mostly due to -moz-display-inline-box/block.