最近のバージョンの Chrome、Safari、FireFox (おそらく最初から) を含む最新のブラウザーはすべて、 ;内の要素styleとlink要素の順序を尊重しているように思えます。head動的に作成され、JavaScript を使用して実行時に追加された場合でも。
たとえば、ここred.cssとgreen.css両方でボディの背景色を指定します。1 つ目はボディの背景を赤に設定し、2 つ目は緑に設定します。
<head>
<!-- other code -->
<link rel="stylesheet" href="red.css" type="text/css">
<link rel="stylesheet" href="green.css" type="text/css">
</head>
その結果、green.cssは後に配置されred.css、後で評価されるため、ボディの背景色は緑色になります。
link要素が動的に作成され、ヘッドに挿入された場合でも、要素の順序は正しいように見えます。たとえば、linkロードgreen.cssする要素を動的に作成すると、 の後に挿入された場合にのみ、ボディの背景色が緑に設定されred.cssます。
ただし、これを尊重していないように見える唯一のブラウザーは Internet Explorer です (少なくとも IE 7-9 はそうではありません)。IE では、最近追加された要素linkまたはstyle要素が、既に評価されたすべてのものの上に評価されるようです。実行時に追加された場合、ツリーの順序は考慮されません。
順序を尊重することは非標準的な動作ですか、それとも Internet Explorer のバグですか? Internet Explorer でこれを修正するにはどうすればよいですか?
私が思いついた (それが機能する) アイデアは、既存linkの要素と要素をすべて動的に削除styleし、それらを同じツリー順序で追加し直すことです。これは、評価したい順序です。
どんな洞察も大歓迎です。
アップデート
要求されたより詳細なコード サンプルを次に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="red.css" type="text/css"> <!-- sets red -->
</head>
<body>
<script type="text/javascript">
setTimeout(function() {
// IE7-8 does not support referencing document.head
var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.setAttribute("href", "green.css");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
// All modern browesers will leave the background
// color red, except IE will set it green.
head.insertBefore(link, head.firstChild);
// Now comment out the above line and try adding the link
// using this instead. All modern browsers (including IE)
// will set the body background color green after two seconds.
// IE seems to always evaluate the last dynamically added link.
// head.appendChild(link);
}, 2000);
</script>
</body>
</html>
の内容red.css:
body { background-color: red; }
の内容green.css:
body { background-color: green; }