Is the HTML <base> tag also honored by scripting and CSS?

Question

The base HTML element provides a base for relative URIs in the HTML. Must JavaScript and CSS also honor it for relative URIs issued in them:

E.g.

JavaScript:

location.href = "mypage.htm"` 

CSS:

h4 { 
    background-image: url(myimage.gif) 
}

(in any browser?)

Solution 1

CSS paths are always relative to the stylesheet itself and have no dependence on the HTML location (except when IE6 is buggy and stupid and tries to load .htc files specified in CSS behavior attributes relative to the document). For other stuff, <base> will affect the perceived current directory of the HTML as if the file was located in the directory defined by base. Consequently, it does affect things like location.href=...;. By the way, inline styles and style information in <style> element are loaded relative to the document location. Those are affected by the <base> tag, of course.

Solution 2

The base tag is indeed only honoured by the relative links inside the HTML document itself.

There's however an IE6-specific bug which you really need to take into account when using <base> tag in HTML (not in XHTML). The <base> tag is in HTML documented as not having an end tag </base>, but IE6 incorrectly assumed it for true which will cause that the entire content after the <base> tag is placed as child of the <base> tag in its HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selections (e.g. html>body) until you discover that there's actually a base in between.

A normal IE6 fix is using conditional comments to include the end tag:

<base href="http://example.com/"><!--[if lte IE 6]></base><![endif]-->

Comments

[BalusC]

@Marcus: It's not HTML4-valid (although browsers accept it). But in HTML5 you can perfectly do so.

[BalusC]

@Marcus: Keep in mind that using <base> affects anchors: stackoverflow.com/questions/1889076/…

[Marcus Downing]

I know, I've changed a couple thousand of them :)