W3C CSS 検証サービスのエラー修正やってみた【未解決もあるよ】

何となく思い立ったので、W3C CSS 検証サービスを使ってみることにしました。仕事では、スペルミスなど致命的なバグ探しぐらいにしか使わないですね。そもそもCSS Validator自体が全部のベンダーに対応してないと古いIE用のCSSとかベンダー独自のプロパティにエラー出ますし、jQuery UIとかWordpressのテーマは下手に手を入れるとどう影響するのか怖いですし。

SEO的にどうかと言うと、Googleのウェブマスター向けガイドラインによれば「サイトのアセット(CSS や JavaScript ファイル)がすべてクロールされるようにしてください。」とあります。Fetch As Googleでページをレンダリングすると、人間の見た目とロボットの見た目と確認できるのですが、CSSやJavascriptをクロール禁止にすると、ロボットでの見た目が崩れます。その結果、検索エンジン側の判断が変わって検索順位に影響する・・・かもしれません。個人的には見た目が変わらないなら文法エラーがあっても大きな問題ではないだろう、という感じですが。

それでも手の届く範囲ぐらいはどうにかしたい人もいるかと思うので、できるだけのことはやってみます。

ではでは、W3C CSS 検証サービスを使って本サイトのトップページを検証してみましょう。

W3C CSS 検証結果 エラー

「CSS レベル3」をプロファイルとして検証したところ、42件のエラーと33件の警告が出ました。そのうち、18件のエラーと7件の警告がバーガーアイコンとかで使用しているFont AwesomeのCSS関連で、あとはサイトのCSSでした。とりあえずはサイトのCSSについてエラーを修正していきます。

文法解析エラーが発生しました *display: inline;

該当のCSSはこんな感じ。

この*displayは、CSSハックといって、ブラウザ間のデザインの差を埋めるための技法です。アスタリスクがついた場合はアスタリスクハックといって、IE6/7に適用されるCSSといった具合になります。なぜこれがCSS文法エラーかというと、CSSのプロパティ名には本来、*(アスタリスク)は書けないからです。セレクタにはもちろん使えます。

しかしIE7以前のバージョンがまだまだ残っていた5年前ならいざ知らず、今はもうそんな遺物は切り捨てたい。そもそもHTTPS接続の場合、IE9以前のブラウザは表示できなくなります。そんなWeb業界に見放されつつある古いIEたちに、それでもまだ手を差し伸べないといけないんですかね?(去年FireFox2を使っている人を見た自分としては切り捨てづらい気分ではありますが)

CSSハックを使わなくても、今は別の方法があります。HTMLの<head>タグ内に、特殊なコメントアウトを使って特定のブラウザ、バージョンにのみ有効なタグを書くことができます。例えばIE7に合わせたCSSを作って、<head>タグ内に以下のような記述を入れます。

こうすることで、もし古いIEに対応する必要が出てきた場合はそちらの定義を適用させることができます。

と、いうわけで。何かあったら上記の方法で救済するとして、とりあえず文法エラーの出ているCSSハックは基本的に全部コメントアウトします。ちなみに、ライブラリなどを使えば古いIEでもvideoやcanvasが見れるようになります。そのときは救済必要ですね・・・。

文法解析エラーが発生しました *zoom: 1;

こちらも上記同様、CSSハックです。zoomプロパティはIE独自のプロパティでして、指定要素を拡大表示する際に使用します。拡大表示については、CSS3ではtransformプロパティなどで指定しますね。IE9以前だとtransformが効かないことがあるらしく、zoom自体は使うことはあるでしょう。ただ、ハックはいらないのでコメントアウトします。

zoom:1は、clearfixでよく使われます。hasLayout問題というのもあり、zoomを取り巻く問題はいろいろ難しいです。これは後々の課題ということで、今はコメントアウトしておきます。

次のプロパティが正しくありません : padding -10px に負の値は使えません : -10px 0

paddingプロパティは、境界と要素との余白の大きさのことです。余白が境界を越えることはできないので、負の値は使えません。マイナスにしてもおそらく効かずに0扱いされると思いますので、0にしてもかまわないでしょう。

プロパティ zoom は存在しません : 1

zoomプロパティはIE独自の実装なので、Validationではエラーになります。いったんコメントアウトして確かめます。

:hooverは未知の疑似要素または疑似クラスです

今回わざと間違えましたが、疑似要素にスペルミスがあるとこんなエラーが出ます。

0 は box-shadow で利用できる値ではありません : 0

これは、CSSではこういう風に書かれていました。

box-shadowは短縮形のプロパティで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetと定義します。そのうち、水平方向の距離と垂直方向の距離は必須項目ですので、0がひとつだけだと文法エラーになります。この場合は「box-shadow: 0 0;」と直します。

W3C CSS 検証結果 警告

次は警告の内容も見てます。

can’t find the warning message for vendor-extension

ベンダーの独自拡張である旨の警告メッセージが見つからない、ということでしょうか。ちなみにW3C CSS検証サービスのオプションで、「Vendor Extensions:」という項目があります。これを「Error」にして検証開始すると、この警告メッセージでなく、ベンダープレフィックスを使っている箇所はすべてエラー扱いになります。zoomプロパティもはじいてますからね、W3Cとしては独自拡張なんかあってはならない立場ですし(標準化の意味がなくなる)、仕方ないですね。何とかしたいですが、この警告は回避できない気がします。

can’t find the warning message for vendor-ext-pseudo-element

ベンダーの独自拡張である疑似要素を使っていると出てくる警告メッセージです。上記同様、回避策はないかと思います。

やはり完全解決は難しいですね。あとfont-awesomeのエラーが消えてないのですが、これをどうするかは悩ましいところです。

最後に、W3C CSS検証サービスのオプションで「警告:」という項目を「全て出力」とすると、再定義されている箇所など、用法的なチェックもしてもらえます。ちなみに当サイトの場合、900件以上用法チェックの警告が出ました。とてもそこまで対応できないので、この際エラーだけ解消できればいいと思います(匙投げ)。

広告
  • LINEで送る