Firefox の開発者ツールで CSS のルールの一部が表示されない場合がある件


Firebug の開発が終わったので、 Firefox に組み込みの開発者ツール(Soouce Maps に対応しているので便利♪)をメインで使うようになって気づいた事。

CSSのルール表示がおかしくなる現象

  • 特定のサイトで CSS のルールが一部しか表示されない
  • CSSファイル内に正しく @charset を設定しているのにルールの表示が文字化けしている

原因は文字コード

Firefox のサポートフォーラムを調べたら全く表示されないケースがあり、色々な原因があるらしいが私のケースは文字コード(エンコーディングスキーム)が原因だった。

CSS ファイル内に正しく @charset を宣言してあっても、これが HTMLページの文字コードと異なると font-family のルール表示が文字化けするし、表示されなくなるルールがある。問題の起きたページで、文字コードだけを CSS ファイルの文字コードに一致させると期待通りCSSルールが文字化けも欠けも無く表示された。