練炭ブログ

萌え壁紙、Irvine、DMonkey、Proxomitron などの情報を扱ってます。

F12開発者ツールは@importしたCSSのURLがおかしい

コメントなし»

Internet Explorer 8 以降で F12 キーを押すと表示される「F12 開発者ツール」(F12 Developer Tools)。ちなみに F12 も正式名称の一部のようです。

CSS のタブにはページ内のスタイルシートを選択するリストボックスがありますが、@import で読み込んだ相対パスのスタイルシートが、少なくとも IE9 では(IE8、IE10 は試していないので不明)、正しくない URL で表示されます。

選択時に表示されるスタイルシートの内容と実際のページのレンダリング結果では正しく本来の URL のスタイルシートが反映されています。

例: 『ちいさな彼女の小夜曲』公式ホームページ
ie9_f12devtool_css

index.html から直接読み込まれている import.css は正しい URL です。

<link REL="stylesheet" type="text/css" HREF="css/import.css">

import.css から以下のように読み込まれている各ファイルは間違った URL になっています。

@import url("./base.css");
@import url("./common.css");
@import url("./page.css");
@import url("./format.css");

JavaScript で document.styleSheets[*].imports[*].href を参照すると開発者ツールと同じように間違った URL が得られます。同じ算出ルーチンを使っているか、開発者ツール自体がそのプロパティを参照してるのかも知れません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です