| CSS3 Validation
|
Ashie73
msg:4277289 | 11:11 pm on Mar 5, 2011 (gmt 0) |
Hi All,
I have just tried to validate my site CSS and I have 42 CSS3 errors, most of which seem to relate to browser specific commands: i.e.
Property -moz-border-radius doesn't exist : 3px 3px
Property -webkit-border-radius doesn't exist : 3px 3px
and Parse Error [empty string] for i.e specific like border-radius: 3px;
Should this be errors I try and resolve to validate if the actual CSS works fine on the browsers? Are there any reprecautions from having non validating CSS?
The link is [edit]
Any advice, thanks? [edited by: alt131 at 7:36 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy - 404 [/edit]
|
alt131
msg:4277763 | 1:19 pm on Mar 7, 2011 (gmt 0) |
Hi Ashley, good to see you back - and fantastic for validating.
I think you must have validated css2.1 - there are less errors in the Validation results [validator.w3.org] for css3.
| Should this be errors I try and resolve to validate if the actual CSS works fine on the browsers? |
|
One reason you may get few responses is because this question comes up a lot, and it's actually complex to answer. Check out the first couple of posts in validating CSS [webmasterworld.com] for some approaches.
So the first question to ask yourself is why you are validating.
| Are there any reprecautions from having non validating CSS? |
|
Given you're validating css3, you've already decided to use a recommendation that not fully implemented at this stage. So the consequences of invalid css will depend on the types of errors and warnings - and whether the repercussions are important to you.
Vendor-specific extensions should not affect other browsers. So the only repercussion of the reported error is that users of other browsers/versions will not enjoy that visual effect. But you decided to provide a different user experience when you decided to use the vendor-specific extension, so it's not so much a validation issue as a design/user experience issue.
However, as you're concerned about validation I would suggest to check the Moz documentation
https://developer.mozilla.org/en/CSS_Reference]CSS Reference
and
https://developer.mozilla.org/en/CSS_Reference#Mozilla_CSS_Extensions
for information about the extensions and when the css3 propety was adopted/implemented. Depending on your target audience, you may be able to remove the vendor-specific extension and just use the css3 property.
The parse errors may indicate missing colons or closing braces which you will want to check. However, I also understand there were issues with the draft and it wasn;t certain how many values had to be entered. A search on border-radius should produce up-to-date information.
I'd also check the warnings: I know over 600 seems a lot, but almost all are about colour/background issues, and many are due to the cascade - so fixing an early issue will resolve a lot of later ones. Plus you may not have to do anything - frequently inheritance means there will not be an issue, but given the nature of the site content I'd imagine accessibility would be high priority, so you'd want to double-check that the text colour was different from the background-color to make sure it was still readable without a contrasting background-image, for example.
|
|
|
