Base-url

From Frontal Wiki

Purpose

This style sets the base location for any resource URLs in the document.

Value

A valid URL starting with "http://" or "https://".

base-url: http://www.frontalcode.com/;

This is a cascading style meaning that applying it to one element affects all of the descendants of that element.

Remarks

When specifying an external resource in Frontal such as with the 'img' tag, we can either specify a full, absolute URL or a partial, relative one. Consider these examples:

<!-- With no starting slash, look for the resource in the same folder as the Frontal renderer SWF. -->
<img src="assets/swfs/test.swf" style="scale: .25;" />
 
<!-- With a starting slash, look for the resource from the web server's document root. -->
<img src="/assets/images/image_10.jpg" style="scale: .25;" />
 
<!-- With an absolute URL, look for the resource where specified. -->
<img src="http://www.frontalcode.com/assets/images/image_10.jpg" style="scale: .25;" />

With the base-url style, we can affect where the first two resources are sought but not the latter one. In the first two case, applying a base-url would practically prefix each resource specification with the value of the base-url style.

A practical use of this style is to relocate a Frontal document from one domain to another. For example, let's say you want to run one of the Frontal examples on your own server. Copy the Frontal document to your server and then add a rule set like the following:

<style><![CDATA[
	document
		{
			base-url: http://www.frontalcode.com/;
		}
]]></style>

As long as the resources in the Frontal document were in one of the first two forms shown above, then this style would cause them to be sought on the Frontal server.

The base-url style is cascading meaning that you may have different values for different parts of your Frontal document. This can be very helpful when you are pulling resources from multiple servers.

Be sure to understand Flash permissions scheme if you see problems using this style and check out this FAQ.

Example

<style><![CDATA[
	document
		{
			base-url: http://farm1.static.flickr.com/;
		}
]]></style>
<img src="23/32606683_0397dd5850.jpg" />

See Also

• video-skin

Can Be Applied To

This style can be applied to all elements but only affects the following:

• img: applied to the "src" attribute.
• video: applied to the "src" attribute and video-skin style.
• include: applied to the "src" attribute.