When I last looked at customizing feeds in WordPress, it was all to do with being able to offer a summary and full text feed simultaneously—making use of WordPress' flexible feed URL syntax and a .htaccess file. In this post I look at modifying the actual contents of the feed using a functions.php file (which may already exist as part of your current theme).

Just as WordPress provides a number of hooks for adding or removing actions in your theme header (see here), so to do the core files that generate your feeds. Editing the core files is however discouraged (it makes upgrading a pain), and although you can build your own replacement feed templates an easy alternative is adding a few lines to your theme's functions.php file.

As a perpetual PHP beginner I feel obliged to warn you that use of the following code is at your own risk.

If there are any PHP/ WordPress experts reading this who can improve on my code please make yourself known ;-)

Removing WP version info

Somewhere, a while back, I read a tip about not including the WordPress version you are running in your template header—potentially allowing hackers to identify you as a target if you haven't kept up-to-date. It's easy to remove if present. For example, in the K2 theme just delete the following line from header.php:

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

I recently released that version information was still being sent out in my feed. The feed XML contained a line like this:

<generator>http://wordpress.org/?v=2.x</generator>

Thanks to Peter Westwood's helpful post I used my theme's functions.php file to remove this with the following code:

//Remove WP version info
function hide_wp_vers() { return ''; }
add_filter('the_generator','hide_wp_vers');

So wherever the_generator function is called (such as in the feed templates in /wp-includes) it gets replaced with... nothing. Job done.

Adding a feed image

A feed image (e.g. your site logo or avatar) is an optional part of the RSS 2.0 spec and shows up in some feed readers along with the feed description. There are plenty of tutorials (search Google) that tell you how to add a feed image by editing core template files, and there are plugins that will add one for you. I had previously edited my core RSS 2.0 template, and lost the changes during upgrades more than once. To avoid this in future here's what's now in my functions.php file:

//Add a feed image
function feed_image() { echo "<image>\n\t\t<title>bioneural.net</title>\n\t\t<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>\n\t\t<link>http://www.bioneural.net</link>\n\t\t<width>64</width>\n\t\t<height>64</height>\n\t\t<description>bioneural.net</description>\n\t</image>\n"; }
add_action('rss2_head', 'feed_image');

Having created my feed_image function I use add_action (Codex) to insert my function via the rss2_head hook (Codex).

Note that \n means new line, \t means tab, and \r (not shown) carriage return: these are just for the sake of formatting. They have no function other than making the feed XML—which you will likely never see—look more organized:

<image>
	<title>bioneural.net</title>
	<url>http://www.bioneural.net/images/kiwi-yellow-64px.png</url>
	<link>http://www.bioneural.net</link>
	<width>64</width>
	<height>64</height>
	<description>bioneural.net</description>
</image>

Here's how the above renders when viewed in Bloglines:

Tip: If you want to add a feed image but don't want to do it via a plugin or functions.php, you can use Feed Image Burner from FeedBurner.

Adding a content license

I've noticed a rise in my content appearing on splogs, usually in the form "[Some random name] wrote an interesting post today: here is an excerpt". This violates the Creative Commons licensing of my content, which requires correct attribution. In a similar vein I've noticed some of my images turning up on "all rights reserved" sites with no attribution. While some folk are no doubt just ignorant, the sploggers are simply morons who don't give a damn. I can't do much about the latter (although I'm giving AntiLeech a spin) but it did get me wondering what I can do to improve the visibility of my licensing terms for the benefit of those "unaware".

The Creative Commons Wiki links to an RSS 2.0 module for annotating feeds. While this may be machine-parsable I've yet to come across a feed reader that actually picks up on it. As well as incorporating this extension I wanted to add a human-readable annotation to each feed item. This one took a bit of figuring out:

//Add CC license to namespace, item, inline img link within description
function add_license_ns() { echo "\n\t" . 'xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"' . "\n"; }
add_action('rss2_ns', 'add_license_ns');
function add_license_item() { echo "\t" . '<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>' . "\n"; }
add_action('rss2_item', 'add_license_item');
function add_license_img($join) {
	$join = _e('<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p>') . the_content();
	return $join;
}
add_filter('the_excerpt_rss','add_license_img');

The first function writes the required namespace declaration; add_action then adds this via the rss2_ns hook (Codex). The next function/ action pair writes the module to each feed item using rss2_item (Codex). The third part is the human-readable bit: writing the image, text, and links and concatenating these with the_content() (Codex) to replace the_excerpt_rss() (Codex). Note also the use of the rel-license microformat.

For this to work you must set your Reading Settings in WordPress to Summary, even though we will be displaying the full text (replacing the_excerpt_rss() with the_content()).

The XML will look like this (edited for clarity):

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	...
	xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	...
		<item>
		<title>Web developer widgets</title>
		...
		<description><![CDATA[<p><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license" title="This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License"><img src="http://www.bioneural.net/wp-content/themes/k2bn/styles/bioneural/cc.png" alt="CC" /></a> From <a href="http://www.bioneural.net/about/terms/">bioneural.net</a>:</p><p>Mac-based web developers...</p>]]></description>
		...
		<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>
		</item>

Rendered in a feed reader humans will see this:

The Creative Commons icon is hopefully recognisable and links to the correct license; the link to bioneural.net links to additional terms of use.

Tip: If you prefer not to have full text feeds containing HTML tags, you could use the_content_rss('', '', '', 250) (Codex) in place of the_content() to produce a 250 word text-only teaser.

Expanding the feed description

The text of the feed description is ordinarily the same text that appears as the tagline for your blog (set in General Settings). You might want to keep it short in your blog header, but perhaps send a more informative version out with your feed.

In K2 at least the description is only used in the head:

<meta name="description" content="<?php bloginfo('description'); ?>" />

and header:

<p class="description"><?php bloginfo('description'); ?></p>

One solution is therefore to replace the PHP call with short fixed text descriptions (e.g. "stuff worth sharing") in your theme template (header.php) and make the description/ tagline in WP General Settings longer, so it gets into your feed e.g.:

<description>bioneural.net is for stuff worth sharing: commentary by Bruce McKenzie. Major topics covered are gadgets, informatics, Internet, Mac, mobile, musings, New Zealand, photography, Project Koru, quicklinks, rant, rave, travel and Windows</description>

I was unable to successfully utilize rss2_head (Codex) in a way that avoided duplicate descriptions.

Tip: Another way to add a more detailed description to your feed only is to use Title/Description Burner from FeedBurner.

Adding a category image

I previously used the now neglected Category Image(s) plugin to send out a category icon with each feed item, replicating their use on my blog to readily identify Mac-related posts, etc. All I needed to do was replace the default item description with this:

<description><![CDATA[<?php c2c_the_category_image(); ?><br /><br /><?php the_excerpt_rss() ?>]]></description>

Sadly such a trick doesn't work with the Category Icons plugin I am now using, but I've been in touch with the plugin author and submitted this as a feature request.

I've had a hard time "getting" RDF (e.g. how it differs from XML), but this article helps give it context. The semantic web is being built simultaneously from the bottom up and top down. Typifying the bottom-up approach, RDF content is machine-readable at the outset; powerful but complex (with several advantages over microformats), RDF is all about inter-operability. Top-down approaches introduce "metadata sprinkling" to existing content, simple but limiting by comparison e.g. microformats (using CSS class attributes as in hCard), or meta elements (meta tags such as those for geo-discovery). Both approaches are valid, but RDF is hard whereas microformats help "the rest of us" contribute to the semantic web. There may be a collision ahead, however, between microformats and RDFa (sprinklings of RDF embedded in existing XHTML).

WordPress 2.5 lets you search across pages (non-blog entries) as well as posts. This is undoubtedly a good thing, but if your pages are liable to turn up in site searches you might want to make a couple of changes to stop page content from swamping your results screen and improve appearances if you use category icons.

In WordPress search results post content is displayed up to the <!--more--> tag:

The rest of the post continues, but when viewed on the non-single/non-permalink web page such as archives, categories, front page, and searches, the post is shown as an excerpt to the more point.

Pages don't usually have a more tag, because there is no excerpt or "teaser" destined for use in a feed. Thus when a page appears in a search results it will display in its entirety.

Furthermore, because I'm using the Category Icons plugin, post titles will display alongside the category icon for ease of identification. Since pages don't usually have a category, they will show indented with no icon.

Here is a search for "architect", showing an iconless page result occupying the screen:

With the addition of <!--more--> to the top of each page, and the use of an icon for Uncategorized content (assuming all posts are categorised) we get this:

Much more usable and informative.

Installation of software you didn't actively choose to install is malware. I'm referring to Apple's recent decision to force Safari 3.1 on hapless Windows users via Software Update. How can you "update" a product that isn't installed? Wife: Have you got anything without Safari? This is bad form Apple. At least Ars consider this browser a much-improved and stable "true competitor".

Microsoft Silverlight is a proprietary cross-browser, almost cross-platform (not yet Linux), and cross-device (WM6 & Symbian only) plug-in vaguely tasked with "delivering the next generation of .NET based media experiences and rich interactive applications for the Web." The developer tools (Windows or Mac) output interactive text, bitmap images, vector graphics, animations, and video (WMV)/ audio (WMA and MP3) playback, in competition primarily with Flash. The plug-in is free (v2 is currently in beta) & curiously you can download the Getting started video in QuickTime for iPod! More here.

iCab—the Internet taxi for your Mac—now sports the Geotag Icon. Alexander Clauss' latest beta (4.0.1b39) enables the status bar Geotag Icon when metadata tags are detected in the page being viewed, generating a pop-up that will plot the geotagged location using Google Maps. iCab has a number of other noteworthy features, including full compatibility with the WYSIWYG editor in WordPress (unlike Safari or Firefox as of this writing). David has some screen captures on his site.

Continuing the recent geo-fixation trend evident on this site, this article shares the results of a slightly deeper delve into GeoRSS and looks at a great browser add-on that offers auto-discovery of geotagged content in webpages and in some feeds.

What is GeoRSS?

Wikipedia describes GeoRSS as "an emerging standard for encoding location as part of an RSS feed." It also encodes location in Atom feeds, and rather than the singular "standard" there are actually two variations (GeoRSS-Simple and the more advanced GeoRSS-GML). A third encoding, W3C Basic Geo, is depreciated but still in use (e.g. by Flickr; see below).

I happen to use the Geo Mashup plugin for WordPress to geotag articles on this site. As well as adding appropriate metadata tags into the head of location-specific posts, the plugin automatically adds GeoRSS-Simple encoding to my feeds. The GeoRSS-Simple feeds are identified with this namespace declaration in the header:

xmlns:georss="http://www.georss.org/georss"

Each item in the feed will be marked-up with a coordinate pair separated by a whitespace and enclosed in a point tag. For example:

<georss:point>50.185676 8.464943</georss:point>

And that's it. So what can you do with it?

GeoRSS in your blog feed

In WordPress you can create a feed for any category or any tag just by putting /feed/ at the end of the URL. This is ideal if you have a dedicated category or tag for geotagged content. In my case I had geotagged content spanning several categories, so I decided to go back and add the tag "geotag" to all my geotagged articles across all categories. This was actually pretty easy because all such articles could be readily identified by the Geotag Icon overlay on the category image—another great reason for you to start using it :-)

This done, I could now offer a dedicated feed for all geotagged content on the basis of the new tag:

http://www.bioneural.net/tag/geotag/feed/

At this point you can be forgiven for thinking "So how is this different from an ordinary feed?" Well, Google Maps can handle GeoRSS in much the same way as it handles KML files: it can extract the geo-location data and plot your feed items on a map. All you need to do is splice together the URL for Google Maps with the URL of your GeoRSS-enriched feed, like this:

http://maps.google.com/maps?q=http://www.bioneural.net/tag/geotag/feed/

As a result, Google Maps will plot the most recent feed items on a map, and clicking on a marker will display an excerpt from that item:

You don't need to register for a Google Maps API key. You don't need to know what an API is. You don't need to copy or edit any code for adding a map to your own site.

Geo-discovery in your feed reader

As mentioned, Geo Mashup (in common with other geotagging plugins) adds metadata tags into the head of location-specific posts. They look like this (two formats):

<meta name="ICBM" content="50.185676, 8.464943" />
<meta name="geo.position" content="50.185676;8.464943" />

Some feed readers and browser extensions can auto-detect these tags when a post containing them is displayed. Recently I've been trying out Minimap Sidebar with Firefox which causes a small map icon "light up" when such metadata are detected. For example, here is a geotagged post you can test it with:

http://www.bioneural.net/2008/01/29/a-winter-walk-in-the-taunus/

In this instance geo-discovery detects the same location data twice, since Minimap recognises both of the above metadata formats (it also scans the page for text geotags e.g. geo:lat=, geo:lng=):

But the real magic is in Minimap's integration with Google Maps. Minmap lets you plot the encoded location side-by-side with the content that it relates to (especially helpful to geography dropouts if the author hasn't yet created their own map). Just drag-and-drop the URL from the browser's address bar into the well below the map in the Minimap Sidebar and the location will be plotted. Right-clicking the post title in the well gives you access to a wealth of options and actions too numerous to list:

Click thumbnail to enlarge image

Minimap Sidebar at work in Firefox

Tony, the developer of Minimap Sidebar for Firefox and geoFlock for Flock, has announced his intention to use the Geotag Icon as a replacement for his current geo-discovery icon. And, according to Nick, we can also look forward to seeing it in the next build of FeedDemon, a fine feed reader for Windows.

GeoRSS in your Flickr feed

Flickr offers what Dan Catt has termed a geoFeed (for reasons unclear). If you look at the feed source (the easiest way is to enter it into the W3C Feed Validator) you can see that there are two namespace declarations in the header (the depreciated W3C Basic Geo and GeoRSS-Simple):

xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
xmlns:georss="http://www.georss.org/georss"

Each item in the feed is marked-up twice, as dictated by each encoding. For example:

<georss:point>-41.296122 174.793167</georss:point>
<geo:Point>
	<geo:lat>-41.296122</geo:lat>
	<geo:long>174.793167</geo:long>
</geo:Point>

Here is an example of a flickr geoFeed URL:

http://api.flickr.com/services/feeds/geo/?id=31017329@N00&lang=en-us&format=rss_200

If you drag-and-drop this feed URL on Minimap it will generate a map just like it did above for geotagged posts. But it won't do that for my dedicated GeoRSS feed even though it shares the same GeoRSS-Simple encoding. Is it because of the W3C Basic Geo in Flickr's feed? No.

So how does this work then? Tony wrote Minimap to scan the dropped URL for the presence of .rss, =rss, .georss, or =georss and—if these strings are found—to send the data via the Google Maps API GGeoXml function to represent the parsed data on a map (i.e. it doesn't parse the feed to discover the encoding). One glance at the Flickr geoFeed URL and you have your answer.

Revisiting GeoRSS in WordPress feeds

We've thus explained why my dedicated GeoRSS feed doesn't get auto-discovered. However, WordPress feed syntax is pretty flexible, so all I needed to do is modify mine slightly:

http://www.bioneural.net/tag/geotag/feed/rss2/

http://www.bioneural.net/tag/geotag/?feed=rss2

The GeoRSS data is now detected by Minimap Sidebar when either feed URL is dropped on the well, and both remain valid feeds.

Ideally Minimap would detect GeoRSS by parsing feeds looking for <georss:point>. However, as Tony explained to me this would have a significant resource overhead that would impair the user experience, being rather more involved that just checking the head for a standard feed link syntax and triggering display of the well-known orange Feed Icon.

Tony also points out that, while drag-and-drop failed to auto-discover my original GeoRSS feed (the URL ending /feed/), I could get it recognized manually via the Add KML/ GeoRSS URL option in Minimap Sidebar.

Geotagging (or geocoding if you prefer) is the act of associating your content (blog posts, photos, feeds, etc.) with a geographic location (e.g. via latitude and longitude co-ordinates). Thus tagged authors can "mash" their content together with the likes of Google Maps, or the Flickr Map if photography is your thing. However, co-ordinates are typically encoded within metadata (or microformat) tags making them visible to machines but hidden from people. We have de facto web standard icons to help identify feeds, OPML, and sharing—so why not for geotagged content?

Update 29.02.08: Thanks to everyone who gave feedback or otherwise contributed to the process of taking this proposal forward. Comments are now closed and further feedback should now be directed to geotagicons.com, where you can now download the new community-designed geotag icon.

The goods

I propose a web standard Geotag Icon, to be used freely by any geotagger or geotagging service. Here is what it looks like at 128px:

At 32px:

And at 16px:

Important: These images are not final; this is a proposal. Please do not hotlink to these images. You can download them individually by right-clicking the one you want, or as part of the draft Geotag Icon Development Kit here.

Family line-up

The family resemblance is obvious:

Why not complete the set? Grab the Feed icon, the OPML icon, and the Open Share icon.

Update 27.03.08: The Open Share Icon Project offers a free, open, community-driven alternative to the trademarked and brand-linked ShareThis.com icon.

Icon specification

• It should be similar in style to existing de facto web standard icons (hereafter known as "the Three");
• It should be distinctive in colour from the Three;
• The colour should in some way represent it's purpose (although this is not a feature of the Three);
• It has to be recognizable at 16px yet not look dull at larger sizes;
• It should be format-agnostic (it doesn't matter what geotagging method is used);
• It should not be closely aligned with iconography from an existing service (e.g. people shouldn't say "Ah, that's the default Google Maps marker!"). That is, it should be service-agnostic.

Inspirations

Words or objects you might associate with geotagging abound. For example, map, compass, navigation, co-ordinates, gridlines, waypoints, pins, markers, X marks the spot, GPS satellites, etc. A Google Image search turns up some rather beautiful yet overly detailed (for our purposes) icon examples, such as Magrathea, geoXtract, RouteBuddy, and HoudahGeo. Some are less delicate (e.g. the button used by the geo microformat or the Geocaching.com logo) but closer to the simplicity we are looking for.

The visual essence of geotagging is marking a point with a pointed object (physical or virtual). In the days before the Internet when I dreamed of travelling the world I had a National Geographic world map on my wall into which I placed pins or tacks to indicate places I'd like to visit. I dug around in my wife's stationery draw and found a few examples:

I think we can all relate to the middle one; it's user-friendly, iconic, and best of all it doesn't get stuck into your heel as easily as the drawing pin when scattered on the floor!

Anatomy of an icon

It might not be an obvious choice, but lacking Illustrator or the skills to use it, I often use OmniGraffle as a drawing tool. The interface is world-class and it can export to a number of formats, including PDF, giving me the option to supply a vector version. Here is the recipe I used if you want to bake your own version, or try out a variation of your own design:

The tack itself is white (with no stroke) to match the central elements of the Three (and it so happens that my model pin was white!). As you increase size, greater detail becomes visible. Crucially the detail degrades gracefully at smaller sizes (16px and 32px shown magnified):

Brown is an oft maligned colour although—as David observed—a tinge of bronze prevents it looking too "dirty". Brown of course is the colour of earth—unless you live in Australia's Red Centre. If you do hail from the Land of Oz don't panic, as the devkit allows you to change the tone (e.g. a red dust effect!) in Photoshop. See the included readme.pdf for details.

Usage examples

It's up to you how you use it, but bear in mind it's not intended as a marker replacement (markers with points are generally more appropriate for that). The idea is to add a visual identifier to your content (blog post, photo, etc.) indicating associated geodata. The image doesn't have to link anywhere, but hyperlinks should be used if it makes sense to do so.

For example, I'm using the Geo Mashup plugin for WordPress and display it in several locations. It appears as an overlay on category images (itself a plugin) that have associated geodata, so you know at a glance that the post pertains to a particular location:

Clicking on the icon transports you to that location on my Google Map (see my Travel category for live examples). The relevant template code is:

<div class="catimage">
	<?php c2c_the_category_image(); ?>
	<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag-overlay">'; GeoMashup::show_on_map_link('<img src="../geotag-16px.png" alt="geotag" />'); echo '</span>'; } ?>
</div>

The class .geotag-overlay is styled in CSS with:

.geotag-overlay { width: 16px; height: 16px; position: absolute; margin-top: 16px; margin-left: -16px; }

The Geotag Icon also appears in the actions box at the foot of an entry, adjacent to the coded co-ordinates and direct link to the location on my Google Map:

The relevant template code is:

<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag">Geotagged at lat ' . $coordinates['lat'] . ', lng ' . $coordinates['lng'] . ' ('; GeoMashup::show_on_map_link('View'); echo ' on map)</span>'; } ?>

The CSS for such inline use is:

.geotag { padding: 2px 0 2px 20px; background: url('geotag-16px.png') left center no-repeat; }

Finally, it appears in the info window when you click on a map marker next to the post title:

This is done is CSS only, like so (.locationinfo is a styling hook provided by the Geo Mashup plugin):

.locationinfo h2 { font-size: 1.2em; font-weight: bold; background: url('geotag-16px.png') left center no-repeat; text-align: left; padding: 2px 0 2px 20px !important; }

Credits

Thanks to David for getting me interested in geotagging again, and for early feedback on the proposed icon. Matt Brett, Ken Rossi, and Alex King are responsible for promoting the Three.

Your opinion counts

I am not opposed to change, colour or otherwise, if that is what folk ask for. My interest is in helping the semantic web become more visible to people, and the proposal is here to stimulate discussion and hopefully arrive at some form of consensus (to the extent that is possible on the Internet!).

If you have an opinion, please share it here or participate in the discussion on Flickr.

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.

During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another.

Text shadows, drop shadows, and round corners in Safari 3

A historical precedent

The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.:

<!--[if lte IE 6]>
	<style type="text/css">
	#pnglogo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='../logo-trans.png'); padding-top: 57px; }
	</style>
	<link rel="stylesheet" type="text/css" media="screen" href="../ie6-patches.css" />
<![endif]-->

It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it?

So, if we can hack our way to supporting inferior or out-dated browsers, why should we not also employ hacks to support leading-edge browsers like Safari 3 that are already capable of rendering much of that draft CSS3 goodness?

Using jQuery's CSS injector

There are probably multiple JavaScripts that let you load CSS via the DOM, but since I'm using jQuery anyway that's how I've chosen to do it. If you don't have jQuery installed go get it and load it in your document head e.g.:

<script type="text/javascript" src="../jquery-1.2.3.pack.js"></script>

Below this we create a $(document).ready() function so that the contents load via the DOM and hopefully before the page content is displayed. Inside this function our "content" consists of a series of CSS selectors (inside the first bracket) paired with the CSS properties we wish to inject (name and value, comma-separated) joined via .css. Example:

<!-- Have jQuery inject WebKit CSS via DOM on selected elements -->
<script type="text/javascript">
	$(document).ready(function(){
	$("h1").css("text-shadow","black 0.2em 0.3em 0.2em");
	$(".description").css("text-shadow","black 0.2em 0.3em 0.2em");
	$("#page").css("-webkit-box-shadow","#333 0px 5px 10px");
	$("#footer").css("-webkit-box-shadow","#333 0px 5px 10px");
	$(".container").css("-webkit-box-shadow","#333 0px 5px 10px");
	$(".container").css("-webkit-border-radius","10px");
});
</script>

If you had a div with the class "container koru", for example, Safari 3 will blend the above box-shadow and border-radius styling (as inline CSS3) with any additional CSS2.1 styling for .container or .koru present in your stylesheet. You can see what's going on using that browser's Web Inspector:

Note: A -webkit- or -moz- prefix on CSS properties is used respectively by the Safari and Mozilla/Firefox browsers to indicate tentative support for as yet non-ratified web standards. Thus -webkit-border-radius: 10px; and -moz-border-radius: 10px; are both potentially differing implementations of "border-radius".

OK, so the "how" is easy. Now the "Should you?"

The positives

Effects are rendered without requiring images.

Effects are rendered without requiring add-on JavaScript effects libraries.

Effects are rendered without increasing page size or load time.

Effects are rendered that may be impossible with some JavaScript or image-based techniques (e.g. anti-aliasing, liquid layout support).

Effects can be targeted at specific web browser engines.

No changes to semantic mark-up are required.

Your stylesheets remain W3C-valid (if they were before!).

Browsers simply ignore CSS properties they don't understand, so degradation is graceful.

If JavaScript is disabled browsers will still load your stylesheets, so degradation is graceful.

It is compatible with template-based websites in not requiring page-specific effects scripts to be inserted into mark-up.

When the -webkit- or -moz- prefix gives way to the real deal of W3C-ratified CSS3 we can simply remove the script and move the content to our stylesheet without having to re-design effects elements or edit any mark-up.

If you don't start using CSS3 now you might have retired before it becomes W3C-ratified.

The negatives

Turning off your stylesheet does not disable styling loaded via the DOM.

Effects can be targeted at specific web browser engines (like browser-targeting, a double-edged sword that undermines the uniformity of the "web experience").

It could be construed as cheating. It is.

What are your views, if you have any, on the merits or otherwise of this technique?

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.

Situation recap

In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients:

• We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article);
• Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color;
• We could use JavaScript effects libraries.

It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size.

Extending jQuery

While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of interactive controls that deal with mouse interaction (e.g. resizing, dragging) and other "user interface" extensions. As of this writing the jQuery documentation is incomplete and the developers in the process of transitioning visual effects formerly included in jQuery UI to a new sister library called jQuery Enchant. The controls (also referred to as core interaction plugins, UI widgets, or components) are themselves are almost invariably dependent on other jQuery extensions—needing at least the Dimensions plugin.

So jQuery needs to get its act together in respect of naming conventions, but perhaps this is more indicative of active development rather than lack of direction? I guess jQuery UI/ Enchant are to jQuery as script.aculo.us is to Prototype. In a nutshell we're saying that with some jQuery code that in turn requires a bit more extra code in order to work, in addition to the code that is "jQuery" itself—we can create visual elements like drop shadows! jQuery is thus readily extendible; to use these extra bits of code you just need to load the relevant add-on script in your document head, after having loaded jQuery itself. A picture may help:

Test cases

I've used the same basic test box from Part 1, so our core document structure looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery test cases</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="jquery.gradient.js"></script>
<script type="text/javascript" src="fx.shadow.js"></script>
<style type="text/css">
	...
</style>
<script type="text/javascript">
// <![CDATA[
	$(document).ready(function() {
	...
	});
// ]]>
</script>
</head>
<body>
<div class="className">
	<h4>Lorem ipsum</h4>
	<p>Lorem ipsum dolor...</p>
</div>
</body>
</html>

With all the necessary libraries loaded we can start adding effects to our div by calling them within $(document).ready() (in place of ... above).

Download the test files here (.zip archive, 27KB).

Here is the live link.

Case 1: Round corners

If you wanted to use fancy images to produce round corners yet avoid extra mark-up, you could use this technique. Alternatively use no images at all via the jQuery corner plugin, available here. The plugin supports a variety of corner types and borders as you can see in the demos. The following call will add cornering with a radius of 20px to a div with the class .cornered:

$('div.cornered').corner("20px");

This will have the following effect on our test box:

Case 2: Gradients

The Element gradient plugin, available here, will fill an element (e.g. div) with a linear gradient of specified direction (horizontal or vertical only) and opacity. It requires the Dimensions plugin. The following call will add a vertical gradient from black to white with 40% opacity to a div with the class .gradient:

$('div.gradient').gradient({ topcolor: '#000000', bottomcolor: '#ffffff', horizontal: false, opacity: 40 });

This will have the following effect on our test box:

Note that you can't shorten the hex-code (it must be #ffffff not #fff for white, for example).

Tip: If you leave the gradient as black to white with some opacity you can create colour gradients much more easily but changing only the background colour of the container. This is a jQuery version of the ALA super-easy blendy backgrounds trick.

Case 3: Borders

Back to the jQuery corner plugin; it can also do borders using nested elements i.e. one rounded box inside another. So our mark-up could be edited thus:

<div class="xtra">
<div class="border">
	<h4>Lorem ipsum</h4>
	<p>Lorem ipsum dolor...</p>
</div>
</div>

But we don't want to edit our mark-up do we? We don't have to.

Tip: We can make use of .wrap() to inject the extra container into our mark-up on-the-fly with JavaScript.

The following calls will add a wrapper div with the class .xtra to our box, then proceed to round our inner box (.border) with a radius of 15px, before padding .xtra with 5px of "border" (whitened with CSS on .xtra) and rounding with a 20px radius:

$('div.border').wrap("<div class='xtra'></div>");
$('div.border').corner("15px").parent().css('padding', '5px').corner("20px");

This will have the following effect on our test box:

Case 4: Drop shadows

In researching this article I came across three ways to create drop shadows using jQuery:

• Shadow is an extension that uses tables with multiple rows subject to CSS styling including varying opacity to create a drop shadow illusion;
• A method that uses images and "onion skin" CSS added via .wrap() to add a drop shadow;
• UI/Shadow.

UI/Shadow, available to download here, is being folded into the yet-to-be-released jQuery Enchant library. It wraps your element in nested divs and uses opacity to create the shadow effect. It also requires the Dimensions plugin. The following call will add a drop shadow to a div with the class . dropshadow:

$('div.dropshadow').shadow({ color: "#444", offset: 5, opacity: 0.2 });

This will have the following effect on our test box:

Combining effects and liquid layouts

As you can see while the effects in cases 1–4 work well enough on their own, they sadly don't play together very well (see Case 5). Whether this is a limitation in one or more of the plugins, or in my scripting know-how I'm not sure.

It is possible to create a rounded box with a border that adjusts to change in text size or window width, but using an image to render the gradient (see Case 6). Because the Dimensions plugin employs absolute positioning, effects that use it (gradients, drop shadows) will "detach" from their elements if you try resizing your browser window or changing text size (see the effect on cases 2, 4, and 5).

The final score

To be fair I guess we should use the same scoring system to evaluate jQuery against the other methods we explored in Part 1.

Scoresheet:

Photo background: Supported.

Gradient background: Supported (as image or scripted).

Four rounded corners: Yes.

Border: Yes (without extra mark-up).

Drop shadow: Yes (without images).

Minimal mark-up: Extra containers in mark-up can be avoided with .wrap().

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: No.

Small footprint: 29KB for jQuery plus 19KB for add-on libraries (background images additional). Of course if you're already using jQuery you need only consider the additional size of any add-ons (e.g. shadows for 6KB).

Graceful degradation: Renders as per the master if JavaScript disabled but liquid layouts may cause problems if width is set on containers added with .wrap().

Liquidity: Yes, with the proviso that you avoid Dimensions-reliant effects.

Score: 9/12 (probably less, because of problems combining effects)

Not enough to de-throne CSS 3 which scored 11/12, or 12/12 if it were a standard. But CSS 3 isn't here yet and won't be widely supported by all major browsers for some time. jQuery is here, however, and JavaScript is widely supported.

Upon reflection there's something to be said for the elegant simplicity and refined geometry of straight lines and sharp corners. This is how the Dwarves would choose to build websites, leaving curves and soft edges to the Elves. So the ultimate question, really, is do you relate more to Gimli or Legolas? Your answer to that, Middle-earthlings, will decide the direction you should take ;-)