有効な CSS が必要ですか? 私は迅速な Web 開発のために Twitter Bootstrap を使用しています。2 つの主な Bootstrap スタイル シートを W3C CSS Validator で実行した後、約 600 のエラーに気付きました。
私の質問は、私のサイトは見栄えが良いのに、CSS が有効であることがなぜそれほど重要なのですか?
有効な CSS が必要ですか? 私は迅速な Web 開発のために Twitter Bootstrap を使用しています。2 つの主な Bootstrap スタイル シートを W3C CSS Validator で実行した後、約 600 のエラーに気付きました。
私の質問は、私のサイトは見栄えが良いのに、CSS が有効であることがなぜそれほど重要なのですか?
はい、有効な CSS が絶対に必要です。CSS はプログラミング言語であるため、その言語規則に従う必要があります。ブラウザーが無効な HTML を受け入れてレンダリングしようとする傾向があるからといって、不適切な形式の HTML を生成することは良い習慣にはなりません。同じことが CSS にも当てはまりますが、幸いなことに、CSS ルールは HTML ルールよりもかなり厳密です。
もう 1 つの理由は、有効な CSS には動作が保証されているためです。ルールを記述した場合、そのルールが特定の方法で動作することが期待できます。(IE のすべてのバージョンと同様に、バグのあるブラウザー。) CSS が無効な場合、得られる動作は未定義であり、テストに使用するブラウザーのいずれかに対してパッチ リリースが発行されると、動作しなくなる可能性があります。CSS が必ずしも壊れるわけではありませんが、無効な CSS を記述した場合、動作が保証されるわけではありません。正しいと思われる動作が発生するだけで、いつでも変更される可能性があります。
正しい CSS と間違った CSS が混在している場合、ブラウザーは無効な部分を無視する傾向があります (仕様で指示されているとおりです) が、ブラウザーごとに多少の違いがあります。同様に、多くの人が CSS ハックの使用を勧めていますが、上記の理由から私は使用しない方がよいと思います。
CSSは有効である必要はありませんが(誰に尋ねるかによって異なります)、無効な場合は、無効の理由が必要です。
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
プロパティの先頭にアスタリスクがあるため、バリデーターにはここで解析エラーがあります。これは、Internet Explorerをターゲットにするためのあいまいですが、認識されているハックです。他のブラウザは認識しないプロパティを無視しますが、IE6/7はアスタリスク付きのプロパティを読み取ります。
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999;
}
ここでのバリデーターエラーは、ベンダー固有の疑似クラスの結果です。認識されないプロパティとは異なり、ブラウザーがセレクターを認識しない場合、ルール全体が無視されるため、ベンダーのプレースホルダー拡張機能は個別のルールである必要があることに注意してください。これは、コンマ演算子を使用している場合でも発生するため、次のようになります。
input::-moz-placeholder,
input::-ms-input-placeholder,
input::-webkit-input-placeholder, {
color: #999999;
}
3つのベンダープレフィックスすべてを認識しない限り、すべてのブラウザで無視されます。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
これは、グラデーション用の古いスタイルのIE拡張機能です。IEがそれに従い、他のブラウザがそれを静かに無視しない場合でも、それは波及し、バリデーターで多くのエラーを引き起こします。
width: auto\9;
\ 9は、IE<=8を対象とするもう1つのIEハックです。
肝心なのは、標準外のことをしている場合は、なぜそれをしているのかを知っていることを確認することです。
CSS が機能するために有効である必要はありません。ブラウザは、理解できない CSS を単純に無視します。
CSS の検証は、仕様に従っているかどうかをテストする方法です。その場合、使用されている仕様で最新のブラウザは CSS を理解します。
それは実際には議論の余地のあるトピックです。W3C ツールは確かに使いやすいですが、最新のコードの多くを考慮していない傾向があります。当然のことながら、彼らが標準を前進させるだけでなく、彼らが提供するツールが新しく独創的なコードに責任があることを確認することも困難です.
Web サイトをすべてのブラウザーおよびすべてのプラットフォームで見栄えよくするためには、そうでなければ "有効" な標準から外れる可能性があります。CSS が 100% 完璧でなくても、クロス ブラウザーやプラットフォームで完璧に機能するサイトに反対するのは難しいことです。それは私の2セントです。
はい、重要です。ほとんどのブラウザーは、html ページをロードするときに w3c 標準に従います。ページに有効な css がない場合、ブラウザーが異なると表示が異なる場合があります。古い Internet Explorer は W3c 標準に準拠していなかったため、開発者に多大なコストがかかるため、開発者は IE がページを適切に表示するために追加の CSS を常に必要としていました。
今日では、さまざまな数のバージョンのさまざまな数のブラウザーがあります。多くをサポートするものもあれば、そうでないものもあります。そのため、スタイルを含める場合、常に 100% 完璧に適合させることはできません。スタイルが問題なく機能する場合は問題ありません。 CSSに関連する問題が発生した場合は、別のブラウザに移動します。それ以外の場合は問題にならないように注意する必要があります。