CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレットdeCSS3。便利なんだけど、何故かCSS3以外のところもスタイルシートが非表示になってしまうサイトがあるなぁ（他でもなくうちがスタイルシート丸々非表示になってしまうんですが）、と思っていたのですが、この際ちゃんと検証してみました。

@importが悪い説

「@importが何か駄目なんだろうな」ということは、うちが丸々スタイルシート非表示になる時点で感じていました。うちのstyle.cssには@importでリセットとレイアウトのスタイルシートを呼び出す2行しか書いてないですから。

で、さっそく試してみたところ問題ないんです。
（以下テストを数回行いますので、気になる方はdeCSS3のブックマックレート登録を）
テスト結果→TEST1

別階層の@importが悪い説

では何が原因かと考えてみたところ、うちはWordPerssで構築してますから表示するページとスタイルシートの置き場所が違うわけです。これと前の説を融合させてみればいいのかと思い試してみました。

階層は
フォルダ
├─index.html
└─フォルダ
　　├─style.css
　　└─import.css
です。

テスト結果→TEST2

予想通り駄目です。これが駄目だったのかと。

更なる問題が発生

さて、確認できたし記事にでもしようかと思ってファイルをアップし直したら、何故かバグが直ってしまったかのように見えました。あれ？と確認してみると、なるほど。バグの全容を解明しましたよ。

@importを相対パスで書くと駄目

小見出しの通りですが、@importが相対パスで書かれていた場合、deCSS3をするとスタイルシートからの相対パスではなく、htmlからの相対パスとして読む用になってしまうようです。尚それは、もう一回deCSS3を押しても直りません。

テスト結果→TEST3

このテストの階層は
フォルダ
├─index.html
├─import.css（赤枠黒背景）
└─フォルダ
　　├─style.css
　　└─import.css（青枠白背景）
です。

これで、数ヶ月抱えていた悩みを解決することが出来ました。
みなさんもdeCSS3を使う場合は気をつけて下さい。