How to validate vendor prefixes in CSS like -webki

2019-01-03 07:11发布

站内问答 / HTML/CSS
758 7 5

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/

7条回答
Ridiculous、
2楼-- · 2019-01-03 07:25

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.

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2019-01-03 07:25

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

webkit inspector of css3 validation

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
4楼-- · 2019-01-03 07:27

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.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2019-01-03 07:36

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>');
查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
6楼-- · 2019-01-03 07:37

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.

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
7楼-- · 2019-01-03 07:37

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)