Getting ready

You will need to install a copy of ant and ant-contrib to use these build scripts. To include ant-contrib into your ant build script, use:

<taskdef resource="net/sf/antcontrib/antlib.xml" classpath="pathToJar/ant-contrib-1.0b3.jar"/>

Additionally, you will need the CSSEmbed JAR.

How to do it…

First setup some properties to be used by the ant target:

<property name="datauri.jar" value="pathToCSSEmbed/cssembed-0.3.3.jar"/>
<property name="datauri.charset" value="UTF-8"/>
<property name="datauri.inputdir" value="inputDirectory"/>
<property name="datauri.mhtmlroot" value="URLofCSSorDomain"/>
<property name="datauri.outputdir" value="outputDirectory"/>
<property name="datauri.root" value="URLofCSSorDomain"/>

Next create your ant target:

<target name="create.css.datauri">
	<for param="file">
		<fileset dir="${datauri.inputdir}" id="css.datauri.files">
			<include name="*.css"/>
		</fileset>
		<sequential>
			<propertyregex property="datauri.filename" input="@{file}" regexp="(\w+\.css)" select="\1" override="true"/>
			<echo message="converting ${datauri.filename} to datauri"/>
			<java jar="${datauri.jar}" fork="true" failonerror="true">
				<arg value="-o" />
				<arg value="${datauri.outputdir}/${datauri.filename}" />
				<arg value="--charset" />
				<arg value="${datauri.charset}" />
				<arg value="--root" />
				<arg value="${datauri.root}" />
				<arg value="@{file}" />
			</java>
			<java jar="${datauri.jar}" fork="true" failonerror="true">
				<arg value="-o" />
				<arg value="${datauri.outputdir}/ie-${datauri.filename}" />
				<arg value="--mhtml" />
				<arg value="--mhtmlroot" />
				<arg value="${datauri.mhtmlroot}" />
				<arg value="--charset" />
				<arg value="${datauri.charset}" />
				<arg value="@{file}" />
			</java>
		</sequential>
	</for>
</target>

How it works…

The trickiest part when using CSSEmbed is the root and mhtmlroot properties. These URLs are not the location of the files on your computer, but on the web, and varies depending on how you reference the images in your CSS. If the images are relative to your CSS, then the values should be set to the URL of your CSS directory. If the images are relative to the root of your domain, then these values should be your URL of your root domain. CSSEmbed will make JAVA net calls when generating the URIs.

The ant-contrib project was necessary, because basic ant does not have a way to iterate on a fileset. I tried to simulate this using macros, but couldn't get it working correctly, so I settled on using ant-contrib.

In the build target, the for iterates on the fileset of CSS files in your CSS directory, storing the value as the param @{file}. As written, it will only search that immediate directory, and not subdirectories. To search subdirectories as well, change *.css to **/*.css.

The propertyregex task finds the filename of the file, by removing the absolute path from @{file}. The CSSEmbed JAR is executed twice: once to create the non-IE CSS and a second time to create the IE 6 & 7 CSS. Your code will need to branch serving a different file depending on the browser. You can do this client-side using conditional comments:

<link type="text/css" href="/build/css/dataUriTest.css" rel="stylesheet"/>
<!--[if lt IE 8]>
	<link type="text/css" href="pathToCSS/ie-dataUriTest.css" rel="stylesheet"/>
<![endif]-->

However, this is less efficient than branching server-side, because the IE version contains all the same CSS as the non-IE version (only the URIs vary).

What's next?

I ran out of time while writing this article, but I would have liked to write a build step that strips out all CSS rules from the IE version, except those that contain data URIs. This would reduce the overhead of client-side branching, using conditional comments. However, the most efficient way of branching would still be server-side, as the data URIs would be duplicated in any client-side branching system.

HTML 5 & CSS 3

Using HTML 5's local storage system Dustin Diaz provides a widget to handle client-side caching:

http://www.dustindiaz.com/javascript-cache-provider/

Nicholas Zakas discusses using data URLs in your CSS, making spriting obsolete. Data URLs add the images to the CSS payload, so the browser doesn't have to make additional requests for images. It's supported by modern browsers and is better than spriting:

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

Other

Have you ever forgot to include the value of a src attribute on your page, causing the browser to fetch the index page of the current directory, or worse repost the previous request? You'll be happy to know that browsers are working on preventing this. Nicholas Zakas discusses the status of the way major browsers are handling empty src attributes:

http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/

Another article by Dustin Diaz describing how to do client-side fuzzy-matching with autocomplete widgets. This is a much needed improvement to most autocompletes and I strongly recommend checking this out:

http://www.dustindiaz.com/autocomplete-fuzzy-matching/

Another great article from Nicholas Zakas discussing ways to improve JavaScript minification. Much of this I've discussed previously, but this is a quick read and a good refresher:

http://www.alistapart.com/articles/javascript-minification-part-II/

Steve Levithan wrote a cool JavaScript regular expression syntax highlighter, using JavaScript. This could be useful for debugging your code, and maybe moreso, if you are including Regular expressions in your blog:

http://stevenlevithan.com/regex/syntaxhighlighter/

<img onerror=alert('x'); src=f

Then when the user content is appended or rendered in the page, the JavaScript executes. Replacing the alert statement with a malicious script, such as reading or changing cookies, is how the attack works. When the img element is rendered it throws the onerror event in browsers that support it, because the markup is incomplete. The especially tricky thing about this attack is most of HTML removal regular expressions used to sanitize parameters won't catch this attack, because there is no closing tag.

To ensure you are not susceptible to this attack, always ensure you are escaping HTML entities before writing to the database, and then do not unescaping them before appending text to the document.

For more information about all cross site scripting attacks, see http://ha.ckers.org/xss.html.

How to do it…

The JavaScript function you will need is:

function includeCSS(conf) {
	if (! (conf && conf.href && conf.name && conf.fx)) {
		throw new Error("Missing configuration for includeCSS functions.");
	}
	
	var pfx = conf.prefix || 'js_',
		id = pfx + conf.id,
		elEvalNode = document.createElement('div'),
		elLinkNode = document.createElement('link'),
		iIntervalId;

	if (includeCSS.oIncludedField[id] && ! conf.force) {return false;}
	includeCSS.oIncludedField[id] = true;

	// setup eval node
	elEvalNode.id = id;
	elEvalNode.visiblity = 'hidden';
	elEvalNode.className = conf.className;
	includeCSS.elBody.appendChild(elEvalNode);

	// setup link node
	elLinkNode.charset = conf.charset || "utf-8";
	elLinkNode.href = conf.href;
	elLinkNode.rel = "stylesheet";
	elLinkNode.type = "text/css";
	includeCSS.elHead.appendChild(elLinkNode);

	// start polling
	iIntervalId = setInterval(function() {
		if (0 < elEvalNode.offsetHeight) {
			clearInterval(iIntervalId);
			elEvalNode.parentNode.removeChild(elEvalNode);
			conf.fx.call(conf.ctx || this, conf.id, conf.data);
		}
	}, 250);

	return true;
}

// some global variables used by the function
includeCSS.elBody = document.getElementsByTagName("body")[0];
includeCSS.elHead = document.getElementsByTagName("head")[0];
includeCSS.oIncludedField = {};

An example CSS files would be something like the following:

body {
	background-color: #333;
	color: #F00;
}

p {
	font-size: 120%;
}

a {
	color: #900;
}

h1 {
	font-variant: small-caps;
}

.actions {
	background-color: #999;
	border: 1px solid #666;
}

.copy {
	color: #C33;
}

/* this style notifies the JavaScript that file is loaded
and should be the last rule in the CSS file */

#js_myCSSFileName {
	height: 10px;
}

Then to actually use the include function call:

function handleCallback(sId, oData) {
	alert("The CSS file (" + sId + ") has finished loading.");
}
if (! includeCSS({href:'pathToFile/myCSSFileName.css', id:'myId', fx:handleCallback})) {
	alert('CSS file (' + sFileName + ') is already included.');
}

How it works…

The JavaScript function requires a single configuration object as its only argument. This object must have the href, id, and fx properties defined, and may optionally define prefix, className, charset, ctx, and data. The href property is the location of the CSS file to include, the id property is the name for the rule you will be using to determine that the CSS has finished loading, and the fx property is the success callback function. The prefix property is defaulted to js_ and is the prefix to apply to the id property for the notifying CSS rule. The className property allows developers to specify a className that should be applied to the div element in case they need to remove global styles (like borders). The charset property defaults to UTF-8 and is the character set used by the CSS file. The ctx property is the execution context of the callback function and the data property is an object to pass as the second argument to the callback function; both default to undefined.

When the includeCSS function is called it first checks to see if the CSS file has already been included using this function, returning false when it has and true when it has not been. If it has not been included, an empty div element is appended to the body element, and a link element is appended to the head element. The link element will cause the browser to begin downloading and evaluating the rules of the CSS file. The div element will have the id attribute of js_idProperty and a height of ZERO, because it lacks content. The last rule in the included CSS file needs to target the div element using #js_idProperty and adjust its height to something greater than ZERO. The last step of the includeCSS function is to start an interval callback to evaluate when the div element has a height greater than ZERO. When this happens the callback function is executed.

Putting it all together, the developer calls the includeCSS function, which fetches the CSS file and appends a div element to the page. The last rule of the CSS file should update the height of the appended div element, notifying the JavaScript that the CSS has finished loading. When this happens a callback function is executed and the developer is notified that their styles have completed loading and rendering. You can play with this function using the following test page:

Test Page

There's more…

Since a configuration object is used as the only argument to the includeCSS function, it is easy to augment. Probably the most needed augmentations are a timeout and a failure callback function. The former would fire if the interval hasn't finished after a specified amount of time and the latter would fire if the CSS file was not found.

One downside to this technique is it only works on CSS files under your control, since you have to be able to add a rule to the end of the CSS document. Although, it is not the most efficient solution, you can work around this issue by using a server-side proxy that fetches remote CSS and appends a rule to the end of the file.

HTML 5 & CSS 3

Microsoft finally jumped on the band wagon, and will support Canvas in IE 9. This is great for those of us who believe that canvas is capable of replacing flash applications. I may have to stop complaining about IE soon:

http://news.cnet.com/8301-30684_3-20008651-265.html

http://blogs.msdn.com/b/ie/archive/2010/07/01/ie9-includes-hardware-accelerated-canvas.aspx

PPK explains that the latest browsers, except FireFox, now support all background CSS without browser prefixes:

http://www.quirksmode.org/blog/archives/2010/06/background_modu.html

Aaron Gustafson has built a JavaScript library, http://www.alistapart.com/articles/stop-forking-with-css3/

A bunch of good CSS3 tutorials published by Smashing Magazine:

http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/

JavaScript

Badass JS is a relatively new blog that is worth checking out. It showcases awesome JavaScript code pushing the boundaries of what's possible on the web.

New elementFromPoint() function introduced in the latest browsers, which tells you what element is at a given point. Additionally, PPK discusses what missing functions IE is adding to version 9.

http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html

Mobile

A CSS inclusion hack that allows you to only target iphone 4:

http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/

The YUI team discuss mobile bowser cache limits:

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

JavaScript Libraries

Ext Js has changed its name to Sencha, bringing two additional projects into the fold: jQTouch, and Raphaël.

How to do it…

The following is a simple example using the hijack pattern to augment a function:

var obj = { // static object
	// add function, supports adding 2 values
	add: function(x, y) {
		return x + y;
	}
};
	
// move the existing function to another variable name
obj.__add = obj.add;
	
// override the existing function with your own, to support adding 2 or 3 values
obj.myFunction = function(x, y, z) {
	var val = obj.__add(x, y);
	return z ? val + z : val;
}

The following code segment hijacks the on function of YAHOO.util.Event, in order to ensure there is only one mousemove listener per page, no matter how many listener functions are applied:

// create a local variable to reference static object
var Event = YAHOO.util.Event;
	
// move the existing function to another variable name
Event.__on = Event.on;
	
// array of callback functions
Event.__mouseMoveCallbacks = [];
	
// replace the existing function with your own
Event.on = function(elem, eventName, fn, data, ctx) {
	var args = arguments;
		
	if ('mousemove' == eventName && document == elem) {
		Event.__mouseMoveCallbacks.push({
			ctx: true === ctx ? data : ctx, 
			data: data,
			func: fn
		});
			
		// when not first callback, don't continue
		if (1 < Event.__mouseMoveCallbacks.length) {
			return;
		}
		
		// replace the callback function
		args[2] = function(e) {
			var args = [e], 
				o, i, j;
			
			for (i=0, j=Event.__mouseMoveCallbacks.length; i<j; i+=1) {
				o = Event.__mouseMoveCallbacks[i];
				args[1] = o.data;
				o.func.apply(o.scope || this, args);
			}
		}
	}
		
	YAHOO.util.Event.__on.apply(this, args);
};

This can also be useful when working with OOP objects in JavaScript to hijack functions on an object's prototype:

var MyObject = function() {};
	
MyObject.prototype.add = function(x,y) {
	return x + y;
};
	
// now hijack the add function
MyObject.prototype.__add = MyObject.prototype.add;
MyObject.prototype.add = function(x, y, z) {
	var val = this.__add(x, y);
	return z ? val + z : val;
};

// now when you instantiate MyObject, each instance will have your 'add' function
myObjectInst = new MyObject();
myObjectInst.add(1,2,3);

Putting this to practical use, suppose you want to hijack the initializer function of the Widget component in YUI 3 to add additional features:

YUI().use('widget', function(Y) {
	Y.Lang.augmentObject(Y.Widget.prototype, {
		__idPrefix: null,
		
		__initializer: Y.Widget.prototype.initializer;
		
		initializer: function() {
			var id,
				bb = this.get('boundingBox');
				
			// does the boundingBox have an id attribute
			if (bb) {
				id = this.get('id');
			}
				
			// otherwise, fetch the widgets ID
			if (! id) {
				id = this.get('id');
			}
			
			// update the id attribute of the boundingBox
			if (bb) {
				bb.set('id', id);
			}
			
			this.__idPrefix = id + "_";
			this.__initializer.apply(this, arguments);
		},
		
		// fetch nodes from widget, using boundingBox id as prefix for all widget related elements
		getWidgetNode: function(name) {
			return Y.one(this._idPrefix + name);
		}
	}, true);
});

How it works …

The is no fancy magic at work here, this pattern simply takes an existing function reference and maps it to a new reference. The original function is then overwritten with one that is more useful, which does something new before executing the original function. In the general example, a simple add that takes two parameters and adds them, is replaced by a new function that can take an optional third parameter.

The hijack of the YAHOO.util.Event.on function is a bit more complicated. As it requires an extra variable, __mouseMoveCallbacks, to store the event callback objects. Additionally, the hijacking function has to parse some arguments so the event handler and callbacks behave the same way they would if executed by YUI. Lastly, as it is written, there is no way to remove these listeners. The YAHOO.util.Event.removeListener function would also need to be hijacked to remove the callback function from the __mouseMoveCallbacks array.

The Y.Widget.initializer function hijack is something useful, if following the coding pattern, where all id attributes inside of the widget, use the widget id as a prefix. Meaning, if the widget id is myWidget, then a button inside the widget would have an id like myWidget_myButton. During the initializer function the id of the boundingBox is stored as _idPrefix. This allows the shortcut method getWidgetNode to return elements by only needing the second part of the id, so getWidgetNode("myButton") would return the button instance. This is a pattern we use at Mint.com to simplify complex id namespaces.

There's more…

This pattern should be used sparingly, and only with functions that you do not really have control over, such as those created by including a JavaScript library. When possible, it is always better to extend an object with your own class, instead of using this pattern. However, this pattern does provide you with a simple way to add minor changes to existing object functions.

HTML 5 & CSS 3

The major browser makers all now support some kind of @font-face font linking. Richard Fink talks about everything you need to know, to understand this new technology and were it stands today:

http://www.alistapart.com/articles/fonts-at-the-crossing/

Louis Lazaris posted a great article on Smashing Magazine, covering the best practices and tools of cross-browser CSS. This is a good read, especially if you need to brush up on the latest cross-browser pitfalls:

http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/

And... that's all I found. Not a whole lot of interesting news these past two weeks. Although, NodeJs is gaining a lot of popularity, and many JavaScript guru's have been tinkering with it. I expect to see some really interesting frameworks in the next few months.

Getting ready

To start, here is an example function that you might want to defer. The following function modifies a value, then executes a global function, _myGlobalFunction:

var myNamespace = {
	updateMyGlobalVariable(value) {
		// do something to value
		_myGlobalFunction(newvalue);
	}
};

This function would throw an exception if the _myGlobalFunction function was not defined when it executed.

How to do it…

The function to attach a deferment is:

/**
 * This function causes the target function to queue all calls to it until readyFx return true.
 * @param namespace {Object} Required. The namespace object.
 * @param fx {String} Required. The function name on namespace.
 * @param readyFx {Function} Required. The evaluation function.
 */
function defermentFunction(namespace, fx, readyFx) {
	var ofx = namespace[fx], // store pointer to old function
		queue = [],
		intervalId, i= 0,
		done = function() {
			clearInterval(intervalId);
			namespace[fx] = ofx; // restore function

			for (var m=0, n=queue.length-1; m<<n; m+=1) {
				ofx.apply(namespace, queue[m]);
			}
		};

	namespace[fx] = function() {
		var args = arguments;
		queue.push(args);

		if (readyFx(args)) {
			done();
		}
		else if (! (intervalId)) {
			// when done, process all queued requests
			intervalId = setInterval(function() {
				console.log(i++);
				if (readyFx(args)) {done();}
			}, 250);
		}
	}
}

And you can use the deferment function as follows:

defermentFunction(myNamespace, 'updateMyGlobalVariable', function(args) {
	return window._myGlobalFunction;
});

You can defer execution anyway you want, you could even use this function to check if something in the DOM is available, before executing a function:

defermentFunction(myNamespace, 'myDomFunction', function(args) {
	return YAHOO.util.Dom.get('myDomNodeId');
});

How it works…

The deferment function takes the existing function, in this example myNamespace.updateMyGlobalVariable, turning it into a local variable, before replacing it with a new function. The new function evaluates the availability function. When the availability function returns false, the variables are added to a queue and an interval timer begins the first time the new function is executed. The timer keeps executing until the availability function returns true. When that happens the original function is restored and executed with the variables stored in the queue.

There's more…

The biggest limitation of the deferment function is that it can only defer functions attached to an object. Since the deferment function is global it does not create a closure with local variables in an execution context, so therefore it cannot reference them. This is why the first variable is a namespace object, and the second argument is the string name of the function attached to that namespace object. You might be able to hack around this limitation by using the scope chain, but this solution was sufficient enough for my needs.

HTML 5 & CSS 3

Nicholas Zakas explains how most of the new browsers already support cross-domain AJAX requests via a protocol known as Cross-Origin Resource Sharing. While it doesn't work yet in all browsers, this could be a really powerful progressive enhancement for your site.

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

Rich Bradshaw takes a deep look at CSS3 and what you can do with it. The site is best viewed in Safari or Chrome, but works pretty well in FireFox 3.5 and even IE 8.

http://css3.bradshawenterprises.com/

Smokescreen is a new product that promises to convert FLASH to HTML5/JavaScript. Check it out:

http://smokescreen.us/

JavaScript Libraries

MooTools has released their second beta for Core 1.3:

http://mootools.net/blog/2010/06/03/mootools-core-1-3-beta-2/

Tools

Smashing Magazine recently did a detailed review of the currently available cross-browser testing tools. Check out there reviews:

http://www.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

Getting ready

You will need to download and include the macprefradio.js and macprefradio.css into your YUI 3 modules:

modules: {
	'gallery-macprefradio': {
		fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/macprefradio.js',
		requires: ['widget','node','dom']
	}
}

How to do it…

Consider the following markup for a traditional group of radio buttons:

<div id="myRadioId3">
	<label>One</label>
	<input checked="checked" name="radio3" type="radio" value="1"/>
	<label>Two</label>
	<input name="radio3" type="radio" value="2"/>
	<label>Three</label>
	<input name="radio3" type="radio" value="3"/>
	<label>Four</label>
	<input name="radio3" type="radio" value="4"/>
</div>

Lets turn it into a Mac Preference Radio:

YUI().use('gallery-macprefradio', function(Y) {
	var radio3 = new Y.MacPrefRadio({boundingBox: '#myRadioId3'});
	radio3.render();
});

You may also convert radio buttons that do not have labels:

<div id="myRadioId2">
	<input checked="checked" name="radio2" type="radio" value="On"/>
	<input name="radio2" type="radio" value="Other"/>
	<input name="radio2" type="radio" value="Off"/>
</div>

Lets turn it into a Mac Preference Radio:

YUI().use('gallery-macprefradio', function(Y) {
	var radio2 = new Y.MacPrefRadio({boundingBox: '#myRadioId2'});
	radio2.render();
});

Additionally, you may skip the radio buttons altogether and implement the MacPrefRadio markup yourself:

<div class="yui3-macprefradio" id="myRadioId1">
	<div class="yui3-macprefradio-button yui3-macprefradio-left" title="yes">On</div>
	<div class="yui3-macprefradio-button yui3-macprefradio-right checked" title="no">Off</div>
	<input name="radio1" type="hidden" value="no"/>
</div>

Lets turn it into a Mac Preference Radio:

YUI().use('gallery-macprefradio', function(Y) {
	var radio1 = new Y.MacPrefRadio({boundingBox: '#myRadioId1'});
	radio1.render();
});

Lastly, you may render a radio button entirely from JavaScript by defining the radios property:

<div id="myRadioId4"></div>

YUI().use('gallery-macprefradio', function(Y) {
	var radios = [
		{value: 'a', text: 'A'},
		{checked: true, value: 'b', text: 'B'},
		{value: 'c', text: 'C'},
		{value: 'd', text: 'D'}
	];
	var radio4 = new Y.MacPrefRadio({name: 'radio4', radios: radios});
	radio4.render('#myRadioId4');
});

There are two new events you can subscribe to:

function handleEvent(e) {
	var o = e.details[0];
	Y.log('oldvalue=' + o.oldvalue);
	Y.log('newvalue=' + o.value);
}
radio3.on('checked', handleEvent);
radio3.on('beforechecked', handleEvent);

The CSS you are including is:

.yui3-macprefradio {
	height: 1.75em;
}

.yui3-macprefradio .yui3-macprefradio-button {
	border: 1px solid #999;
	float: left;
	padding: 0.1em 0.5em;
	-webkit-border-radius: 6px; /* web-kit browsers */
	-khtml-border-radius: 6px; /* konquerer, works in safari too */
	-moz-border-radius: 6px; /* gecko browsers */
	-o-border-radius: 6px; /* possibly for opera */
	border-radius: 6px;
	text-align: center;
	width: 50px;
}

.yui3-macprefradio .checked {
	background-color: #DAF4DC;
	border-color: #7DC67D;
}

.yui3-macprefradio .yui3-macprefradio-center {
	border-left: none;
	-webkit-border-radius: 0;
	-khtml-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}

.yui3-macprefradio .yui3-macprefradio-left {
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	-khtml-border-bottom-right-radius: 0;
	-khtml-border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	-o-border-bottom-right-radius: 0;
	-o-border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.yui3-macprefradio .yui3-macprefradio-right {
	border-left: none;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-khtml-border-bottom-left-radius: 0;
	-khtml-border-bottom-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomleft: 0;
	-o-border-bottom-left-radius: 0;
	-o-border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

How it works…

A set of radio buttons, is little more than a UI handling a group of like fields that can be set to several, mutually exclusive values. This widget replaces a group of radio inputs with the same number of Div elements that are grouped together, where one is styled to be checked. Behinds the scenes it maintains a hidden element with the same name attribute value as the radio inputs and a value set to the currently checked radio. This hidden element allows forms to submit and serialize correctly.

The markup created by the widget is a Div element to replace each radio input. These Div elements will have the class yui3-macprefradio-button applied and one of the following classes: yui3-macprefradio-left, yui3-macprefradio-center, yui3-macprefradio-right; depending on its position in the array of radio inputs. The title attribute of the Div element is the previous value of the radio input, and the content is the same as the content of the Label element element or it is also the value of the radio input. A class checked is applied when the checked.

The CSS makes use of rounded corners to style the elements. This is a CSS 3 property and will not be supported by all browsers, however, older browsers will fallback to square corners. Most of the styles will not need to be adjusted, however, the width, padding, and border-color of .yui3-macprefradio-button can be changed to meet your needs. Additionally, you will probably want to adjust the .yui3-macprefradio .checked styles.

The MacPrefRadio widget extends from the Widget modules, so you can leverage all its features, including listening for DOM events and attribute change listeners. When instantiating, simply pass in the parent element as the boundingBox and MacPrefRadio will handle the rest. Keep in mind that it will replace the content of everything inside of the boundingBox, so there should only be radio buttons and labels contained therein. If instantiating from markup containing radios without a Name attribute, or from JavaScript, you will need to define the name attribute. Normally, this is determined automatically.

You only need to supply the radios attribute, if rendering via JavaScript. Any values supplied to this attribute will supercede any elements in the DOM. A radio is represented by an object literal containing at least the value and text properties, and optionally the checked property. The value is the value that should be used for the radio, if the form is submitted. The text is the value that should be shown as a label for the radio. And checked is the checked state of the radio. If multiple checked values are provided, the last one in the array will be used.

The checked and beforechecked events are new events added by MacPrefRadio. They fire whenever you click on a new radio and it becomes selected. The event object passed into the callback will contain an array on the details property. The first value of that array is an object with two properties oldvalue, value. If the beforechecked event handler return false then the checking can be prevented.

There's more…

There isn't really much more to say. This widget is backwards compatible with older browsers, will serialize, and doesn't affect markup if JavaScript inside supported. So you get the best of all worlds. However, if there is a missing feature, please let me know and I'll be sure to improve it. Lastly, I will be submitting this to the yui3-gallery soon, so look forward to seeing it there.

There is a Test Page available for you to play with and until the files are on the YUI 3 Gallery, you can download them here:

macprefradio.css

macprefradio.js