IE10はbase要素の相対URL指定に対応

投稿

開発が進んでいるIE10に関して、「マイナーな変更点リスト」を記した記事が。

個人的に興味を持ったのは、base要素に関する次の内容。

For interop, the BASE element now supports relative paths.

Still, I beg of you, don’t try using a relative URL in your BASE element and avoid using the BASE element if you can possibly avoid it.

href属性のあるbase要素を記述すると、HTML内の相対URLの解決が行われますが、HTML4.01ではその指定方法にこんな制約があります。

  • 指定できる値は絶対URL
  • head要素の中で、外部リソースを参照する要素よりも前に記述しなければならない[1]

しかし、実際はFirefox, Google Chrome, Opera, SafariなどIE以外の主要ブラウザは相対URLの指定にも対応しており、仕様書の記述とは異なる解釈がなされます。いくつかのパターンを試してみました。

パターン IE6 IE7 IE8〜9 IE以外の4ブラウザ
base要素に相対URLを記述 絶対URLとして解釈 絶対URLとして解釈 無視 対応
head要素内に記述したbase要素より前に記述した相対URL 未解決 未解決 未解決 未解決
body要素内に記述したbase要素より前に記述した相対URL 未解決 未解決 未解決 解決
body要素内に記述したbase要素より後に記述した相対URL 解決 未解決 未解決 解決

base要素に相対URLを記述した場合については補足が必要でしょう。たとえば、http://example.com/base.html でアクセスできるリソースにおいて

<base href="foo/" />
<link rel="stylesheet" href="bar.css" />

と記述した場合、bar.cssは次のように解釈されます。

  • IE6〜7は http://foo/bar.css
  • IE8〜9は http://example.com/bar.css
  • IE以外は http://example.com/foo/bar.css

このようにブラウザによって解釈がバラバラなため、基本的に相対URLを指定するべきではありません。また、base要素をhead要素の外に記述した時の解釈も統一されていませんが、そもそもそれはvalidでない状態なので、いずれにしても止めるべきでしょう。

ほかにもform要素のaction属性を空にした場合はBase URL処理が行われないという事象もあり、こちらは仕様書の記述を実装に合わせて変更しているように見受けられます。

古くからある要素にもかかわらず、IE10においてブラウザごとの実装差異がなくなり、さらに仕様が実装に歩み寄ったことで仕様に準拠したブラウザがやっと出そろったことになる、といったところでしょうか。

脚注

  • 1.

    HTML5では、html要素にmanifest属性でURLを指定できるようになりましたが、これはbase要素による解決を受けません。仕様書でも記述位置の制約についてexcept the html element(W3C) と書かれています。 ↩ 戻る