W3C CSS 検証サービスのエラー修正やってみた【Font Awesome編】

前回の続きということで、本サイトのトップページについてW3C CSS 検証サービスを使った結果、font-awesomeのCSSにエラーが出ていたので、それをなるべく修正してみようと思います。本来やるべきではないと思います。まあ勉強ですから。

Font Awesomeをダウンロードする

もともとCDNを使って読み込んでいたFont Awesome CSSですが、カスタマイズするにあたってサイトからダウンロードして使います。

ここからダウンロードします。

ダウンロードした圧縮ファイルを解凍し、サイトにアップロードします。現在は4.5.0が最新版です。アップロードしたらCSSのリンク先をサイト内に変更して、W3C CSS 検証サービスを使ってページを再検証します。

プロパティ text-rendering は存在しません : auto

text-renderingプロパティはSVGのテキストレンダリングについて定義するもので、現在CSS標準のプロパティではありません。テキストのカーニングやリガチャの滑らかさに影響します。ChromeやFireFoxなどがすでに実装しているようですが、いろいろ問題が残るプロパティだそうです。まだCSS標準ではないため、Validatorでエラーが出ていますので、いったんコメントアウトしておきます。

申し訳ありませんが、at-rule @-webkit-keyframes はまだ実装されていません。

@keyframesは、アニメーションの中間地点でのCSS定義を行うための@-規則です。@-規則とは、例えば@charsetや@importなどといったような、セレクタとプロパティだけでは指定できない機能を補うための定義です。@keyframesはChrome(Android)とSafariでベンダープレフィックスが必要ですので、font-awesomeでも定義しています。

このエラーが出ている箇所は、次のとおりです。

.fa-spinクラスをつけると、アイコンが回転します。そのアニメーションのために@keyframesを使っているようです。




Chromeではこの記述をコメントアウトしてもアイコンは回転してますね。Safariなどで確認もしたいのでコメントアウトしておきます。

プロパティ名の前にセミコロン(;)を追加してみて下さい

基本的にセミコロンの付け忘れで発生するエラーですが、font-awesomeで出ているこのエラーは1つの原因に集約されます。まずはエラーが出ている記述はこうなってます。

要素を回転や反転させるための定義についてベンダー対応しています。現在、transform(2D)プロパティはPCの主要ブラウザでは実装されていると思いますが、スマホについては不明です。コメントアウトして様子をみます。

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

これでW3C CSS 検証サービスのエラーは全部消えたと思います!他のページについても確認しましたが、現状すべてのエラーが消えました!

Androidの標準ブラウザでは回転や反転が効いてないようです。AndroidのChromeやFirefoxでは効いてるようですが、やはりベンダー対応は必要ですね。

広告
  • LINEで送る