Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS3 Validation

11:11 pm on Mar 5, 2011 (gmt 0)

New User

joined:Mar 3, 2011
posts: 3
votes: 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]

1:19 pm on Mar 7, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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
[developer.mozilla.org...] Reference
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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members