Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?)

like image 749
John K Avatar asked Jan 29 '10 10:01

John K


People also ask

What is the base tag in HTML?

Definition and Usage. The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.

What is the purpose of base href tag?

The href attribute specifies the base URL for all relative URLs on a page.


2 Answers

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.

like image 67
mmx Avatar answered Sep 24 '22 04:09

mmx


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]--> 
like image 45
BalusC Avatar answered Sep 23 '22 04:09

BalusC