I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate?
Asked
Active
Viewed 2.9k times
17
-
5A validator tells you if your CSS matches the spec. What good would be a validator that passed a CSS file that included non-standard properties? You had some good reasons for including non-standard properties, so why do you care whether it validates after you chose to do that? – Joel Mueller Dec 11 '09 at 17:53
7 Answers
12
Although the syntax for vendor extensions is mentioned in the CSS3 Syntax module and introduced into the grammar to allow vendors to implement their own prefixes ignoring the standard, the actual vendor extensions themselves are not recognized as official CSS properties. This is not going to change, as they're proprietary and specific to the vendors that invent and use them.
However, a recent enhancement (early 2011) to the Jigsaw W3C CSS Validator makes it possible to reduce validation errors triggered by vendor extensions to warnings. Find this new option among other such as the level of CSS to validate against by expanding the More Options section:
This makes it easier to find the real problems with your stylesheet if it still doesn't validate. If vendor extensions are the only things triggering errors, turning them into warnings will allow your stylesheet to validate tentatively. It also eliminates the need to maintain vendor extensions in a separate stylesheet that you have to hide from the validator.
Warnings are the furthest you can shy away from errors, though, as ultimately, vendor prefixes are still non-standard and therefore technically invalid CSS.
BoltClock
- 700,868
- 160
- 1,392
- 1,356
11
No, they are browser specific properties, and not defined in the standard CSS specification.
That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification.
womp
- 115,835
- 26
- 236
- 269
-
It's not valid CSS according to the W3C spec. You could try importing it as a separate sheet to your main sheet, and see if the validator ignores imports, but that would just be validator specific logic. – womp Dec 11 '09 at 17:52
-
-
This answer still stands, but for a new solution (or workaround) recently implemented by the maintainers of the validator themselves, see my answer. – BoltClock Dec 13 '11 at 06:49
5
It partly possible. Collect all your unsupported css classes in one file (css3.css)
Example:
css3.css
.round{
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}
default.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css3.css">');
</script>
</head>
<body>
<div class="square round"></div>
</body>
</html>
Search engine don't run client scripts, so your W3C unsupported attributes will not damage your SEO. As for green css validation, sorry, not yet.
kami
- 957
- 9
- 8
-
2Do crawlers bother trying to validate your CSS? It seems like a phenomenal waste of resources when they're primarily concerned with content. – Nick T Dec 10 '13 at 19:31
1
No, as they are not part of the standard the validator validates against. The only solution that comes to mind is to put the incompatible properties into a separate style sheet.
Pekka
- 442,112
- 142
- 972
- 1,088
1
The Mozilla and WebKit specific properties will not validate. What you can do is separate your "enriched" css into a separate style sheet. Just like you separate your ie hack styles out of your main style sheet. This way your base style sheets will validate.
Lark
- 4,654
- 7
- 33
- 34
1
If you use a separate CSS file for my "invalid" or "browser-specific" CSS then use a little PHP to filter out that CSS from the validator:
<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){
echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />';
}
?>
Then link to the validator with CSS3 as the profile (accepts border-radius, text-shadow, etc.):
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$_SERVER['HTTP_HOST'] doesn't work but perhaps there is something that will?
12-12-2011
Kami really posted the best solution. I create a separate css3.js file and document.write(''); the CSS line by line:
CSS3.js
document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');
Kelly
- 11
- 2
0
@BoltClock is TOTALLY right on this one... W3C has indeed added a vextwarning level BOOL search criteria. It is NOT documented... but if you are using their SOAP API validation you can add a parameter to the payload of your validation GET request....
&vextwarning=true
for example... if you wanted to edit the CSS validator command in TextMate... you would "Edit Bundles...", aka ⌃+⌥+⌘+B
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='
scope = STDIN.read
…
to - something - more along the likes of
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='
scope = STDIN.read
…
Notice that I also added a level=css3 and changed the warninglevel. Alter these, according to the API, as needed.
If you want to see all the parameters that are available via the "online" submit mechanism.... open up Firebug, or the Webkit inspector, etc.. while submitting a query via their form and check out the full request content to get even more options, as needed...
Alex Gray
- 16,007
- 9
- 96
- 118