web-dev-qa-db-ja.com

-webkit-や-moz-のようなCSSでベンダープレフィックスを検証する方法は？

Webkit/Mozillaの境界線の半径とボックスシャドウのCSSプロパティを使用していますが、CSSで検証したいのです（現在は検証していません）。検証する方法はありますか？

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

cssw3c-validationvendor-prefix
17
a432511

いいえ、これらはブラウザ固有のプロパティであり、標準のCSS仕様では定義されていません。

そうは言っても、CSSのベンダー固有の拡張に関するルールに正しく従っています。これは、W3Cの公式CSS仕様には含まれていません。

11
womp

ベンダー拡張の構文は CSS3構文モジュールで説明 であり、ベンダーが標準を無視して独自のプレフィックスを実装できるように文法に導入されていますが、実際のベンダー拡張自体は公式のCSSプロパティとして認識されません。これらは独自のものであり、それらを発明して使用するベンダーに固有のものであるため、これは変更されません。

ただし、 Jigsaw W3C CSS Validator に対する最近の機能強化（ 2011年初頭 ）により、によって引き起こされる検証エラーを減らすことができます。 警告に対するベンダー拡張。 その他のオプションセクションを展開して、検証するCSSのレベルなど、この新しいオプションを見つけます。

これにより、スタイルシートがまだ検証されない場合でも、スタイルシートの実際の問題を簡単に見つけることができます。ベンダー拡張がエラーを引き起こす唯一のものである場合、それらを警告に変えることで、スタイルシートが暫定的に検証できるようになります。また、バリデーターから非表示にする必要がある別のスタイルシートでベンダー拡張機能を維持する必要がなくなります。

警告は、エラーを回避できる最も遠い場所ですが、最終的には、ベンダープレフィックスは依然として非標準であるため、技術的に無効なCSSです。

12
BoltClock

それは部分的に可能です。サポートされていないすべてのcssクラスを1つのファイル（css3.css）に収集します

例：

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>

検索エンジンはクライアントスクリプトを実行しないため、W3Cでサポートされていない属性がSEOに損傷を与えることはありません。緑のCSS検証については、申し訳ありませんが、まだです。

5
kami

いいえ、バリデーターが検証する標準の一部ではないためです。頭に浮かぶ唯一の解決策は、互換性のないプロパティを別のスタイルシートに配置することです。

1
Pekka

MozillaおよびWebKit固有のプロパティは検証されません。あなたができることはあなたの「豊かな」cssを別のスタイルシートに分けることです。つまり、ハックスタイルをメインスタイルシートから分離するのと同じです。このようにして、基本スタイルシートが検証されます。

1
Lark

「無効な」または「ブラウザ固有の」CSSに別のCSSファイルを使用する場合は、少しPHPを使用して、バリデータからそのCSSを除外します。

<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_Host'])){ 
    echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />'; 
}
?>

次に、CSS3をプロファイルとして使用してバリデーターにリンクします（border-radius、text-shadowなどを受け入れます）。

http://jigsaw.w3.org/css-validator/check/referer?profile=css3

$ _SERVER ['HTTP_Host']は機能しませんが、おそらく機能するものがありますか？

2011年12月12日

カミは本当に最高の解決策を投稿しました。別のcss3.jsファイルとdocument.write（ ''）;を作成します。 CSSを1行ずつ：

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

@BoltClockは[〜＃〜]完全に[〜＃〜]これにぴったりです... W3Cは確かにvextwarningレベルのBOOL検索条件を追加しました。 [〜＃〜]文書化されていません[〜＃〜]...しかし、それらを使用している場合 SOAPAPI検証 =検証GETリクエストのペイロードにパラメータを追加できます..。

_&vextwarning=true_

たとえば... TextMateでCSSバリデータコマンドを編集したい場合...「バンドルを編集...」、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-

_#!/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
…
_

_level=css3_も追加し、warninglevelを変更したことに注意してください。 APIに従って、必要に応じてこれらを変更します。

allを表示したい場合は、「オンライン」送信メカニズムを介して使用できるパラメーターを確認してください。 .. フォーム を介してクエリを送信しているときにFirebugやWebkitインスペクターなどを開き、_full request content_をチェックして、必要に応じてさらに多くのオプションを取得します。

webkit inspector of css3 validation

0
Alex Gray