How to validate vendor prefixes in CSS like -webkit- and -moz-?

问题

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?

http://jigsaw.w3.org/css-validator/

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

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>');

回答7:

@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...

来源：https://stackoverflow.com/questions/1889724/how-to-validate-vendor-prefixes-in-css-like-webkit-and-moz

标签

css

css3

w3c-validation

vendor-prefix