CSS で -webkit- や -moz- などのベンダープレフィックスを検証するにはどうすればよいですか?

https://stackoverflow.com/questions/1889724

19-09-2019
|

質問

私は webkit/mozilla の境界線半径とボックスシャドウ CSS プロパティを使用していますが、CSS を検証したいと考えています (現在は検証していません)。それを検証する方法はありますか?

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

解決

いいえ、彼らは、ブラウザ固有の性質であり、標準のCSS仕様で定義されていません。

言われていること、彼らが正しくCSSのベンダー固有の拡張のための規則に従ってください。これは、W3Cの公式CSS仕様でだけではありません。

他のヒント

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

ただし、最近の機能強化 (2011 年初頭）へジグソー W3C CSS バリデーター検証を減らすことが可能になります エラー ベンダー拡張機能によってトリガーされ、警告. 。を展開して、検証する CSS のレベルなどの中でこの新しいオプションを見つけます。 より多くのオプション セクション：

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

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

部分的には可能です。サポートされていないすべての 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;
    }

デフォルト.css

 .square{
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
    }

ページ.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 検証については、申し訳ありませんが、まだです。

いいえ、彼らはバリデータが検証に対して、標準の一部ではないとして。頭に浮かぶ唯一の解決策は、別のスタイルシートに互換性のない性質を置くことです。

MozillaとWebKitの特定のプロパティは検証しません。あなたにできることは、別のスタイルシートにあなたの「濃縮」CSS別のものです。ちょうどあなたがあなたのメインのスタイルシートのうち、あなたすなわちハックのスタイルを分離好き。この方法で、あなたの基本スタイルシートを検証します。

あなたは私の「無効」または「ブラウザ固有の」CSSのための個別のCSSファイルを使用する場合は、

その後、バリデータからそのCSSをフィルタリングするために少しのPHPを使用します：

<?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とバリデータへのリンク（境界半径、テキスト影などを受け付ける。）

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

$ _、SERVER [ 'HTTP_HOST']は動作しませんが、おそらくその何か？

があります

2011年12月12日

神は本当に最善の解決策を掲載しました。私は別のcss3.jsファイルとのdocument.write（「」）を作成します。ラインによってCSSの行：

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

@ボルトクロックは 完全に まさにこれです...W3C は実際に、 vextwarning レベル BOOL 検索条件。それはない文書化された...ただし、それらを使用している場合は、 SOAP APIの検証検証のペイロードにパラメータを追加できます GET リクエスト....

&vextwarning=true

例えば...TextMate で CSS バリデーターコマンドを編集したい場合...「バンドルを編集...」とします。別名 ⌃+⌥+⌘+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
…

に - 何か - などに沿ってさらに詳しく

#!/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 に従ってこれらを変更すると、 必要に応じて.

もしあなたが見たいなら全て「オンライン」送信メカニズムを介して利用可能なパラメータ....Firebug や Webkit インスペクタなどを開きます。経由でクエリを送信するときに、彼らの姿そしてチェックしてください full request content 必要に応じて、さらに多くのオプションを取得するには...

webkit inspector of css3 validation

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

CSS で -webkit- や -moz- などのベンダー プレフィックスを検証するにはどうすればよいですか?

2011年12月12日

CSS で -webkit- や -moz- などのベンダープレフィックスを検証するにはどうすればよいですか?