ちょっとした事情があって干渉するルールを持つ二つのlink要素を状況によってスワップさせたいことがあった。どちらかのみを書いておいて条件に合わせて差し替えるのが普通のアプローチだと思うけど、先読みさせたかったのであらかじめ両方共読み込ませておいて、head要素内での順序を変えてカスケーディング順序を変えるという方法で行った。動的にlink要素の順序を変更すると、カスケーディングの順序に影響を与えるようだ。
Demo: link Element Order
デモは.testの前景色を緑にするCSS・赤にするCSSの順で両方読み込み、後で緑にするCSSをhead要素の最後に動かしている。だいたいのブラウザで意図した通りに緑になるようだ。考えて見れば当然とも言えるんだけど、やろうとすら考えたこともなかったのでちゃんとしてるんだなーという感想。
var elmHead = document.head;
var cssGreen = document.getElementById('green');
elmHead.appendChild(cssGreen.cloneNode());
elmHead.removeChild(cssGreen);クローンして追加してから削除するようにすると、大きな干渉がある時にもオーバーヘッドが最小限に抑えられると思う。元のノードの削除は遅延させても良いかもしれない。
結局はその事情には別の方法で対処することになったので無駄な調査だったけど、なんかの時に思い出して使いたい。