Got style?

A simple jQuery plugin that detects if CSS is supported by the browser.

This can be useful for protecting browsers that don’t support CSS from scripts that rely on CSS to function.

Examples

Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.got-style.js"></script>

Within your jQuery function/plugin, you can test for CSS support after the DOM is ready like this:

// is CSS supported? (if gotStyle plugin is not avialable, assume it is supported).
if (
	typeof $.browser.gotStyle != 'undefined' &&
	$.browser.gotStyle() === false
) {
	// The browser does not have CSS support available or enabled, exit the script
	return;
}

Testing before DOM ready

If you need to test if CSS is supported before the DOM is ready, you will need to pass a reference to a DOM node that is complete (i.e: the closing tag has been parsed by the browser). For example:

<body>
	<p id="test">This element will have been completed (parsed) when 
		gotStyle is called, even though the rest of the DOM is not yet 
		ready.</p>
	<script type="text/javascript">
		if (
			typeof $.browser.gotStyle != 'undefined' &&
			$.browser.gotStyle($('#test')) === false
		) {
			// The browser does not have CSS support available or enabled
			alert('CSS not supported');
		}
	</script>
...

Working example

A complete demonstration of the Got style? plugin is available.

Also, the plugin can be seen in action with the compact content widgets.

Download

Got style? is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.

Package

Download the complete Got style? 0.1 example package (.zip)

Individual files

Posted in

Leave a reply