Firebug の開発が終わったので、 Firefox に組み込みの開発者ツール(Soouce Maps に対応しているので便利♪)をメインで使うようになって気づいた事。
CSSのルール表示がおかしくなる現象
- 特定のサイトで CSS のルールが一部しか表示されない
- CSSファイル内に正しく @charset を設定しているのにルールの表示が文字化けしている
原因は文字コード
Firefox のサポートフォーラムを調べたら全く表示されないケースがあり、色々な原因があるらしいが私のケースは文字コード(エンコーディングスキーム)が原因だった。
CSS ファイル内に正しく @charset を宣言してあっても、これが HTMLページの文字コードと異なると font-family のルール表示が文字化けするし、表示されなくなるルールがある。問題の起きたページで、文字コードだけを CSS ファイルの文字コードに一致させると期待通りCSSルールが文字化けも欠けも無く表示された。