Current State of Affairs

Web folks are a clever bunch, though. If browser support for CSS won’t give us a way to target a particular element, a common solution is to make classes do the heavy lifting for us. Going through files to add class="text" to every text input is an all-too-common experience for web designers.

Adding the classes allows us to target elements on all browsers, but is labor-intensive and potentially error-prone. Moreover, if your site includes content (like comments or blog posts) which will entered by users, you have no easy way to ensure those classes are added appropriately.

A Glimmer of Hope

jQuery is one of several great javascript frameworks which have burst onto the scene in the past year or so. One of the reasons jQuery has gotten a lot of attention from web designers is the way it allows you to select elements – in many cases, jQuery selectors are identical to CSS selectors. jQuery is also extremely extensible. If there’s functionality you need which isn’t provided by the core framework, you can easily add it via a plugin (or by extending jQuery directly).

In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.

Pencils out

Before we can start to determine which elements ought to have classes added, we’ll need a way to access each stylesheet being used by a given page. Fortunately, the document.styleSheets array does exactly what we want. Unfortunately, we have to incur a little bit of overhead here. Since browsers will silently excise rules they don’t understand, we have to re-request the CSS files via javascript, and parse those for matches.

Now, the fact that jQuery supports CSS selector syntax comes in really handy. We can pass the matching CSS rules directly to jQuery, and add classes appropriately. Then, any browser supported by jQuery can properly target elements, even useful-but-not-broadly-supported CSS rules like ul li:first. All we need to do to have classes added to match any of the rules in our CSS is include jQuery and the SuperSelectors plugin, and add the following javascript:

$(document).ready(function() {
  $(document).superSelectify();
});

This is a great start, but some of us are maintaining sites with established conventions for element classnames. Maybe you’re working on an educational site, and the child is already reserved for another context. No problem. SuperSelectors will allow custom classes to be passed in, while still providing sensible defaults. You can override any (or all) of the default classnames. If you need to alter the class attached to child elements to be child-element, your javascript would just change to be:

$(document).ready(function() {
  $(document).superSelectify({childClass: "child-element"});
});

Attribution needed

What about special cases which fall outside the normal advanced selectors? Maybe we need to have styles applied conditionally, based on attributes. For example, maybe the links in your file download list should have an icon based on the extension of the file they’re pointing to. CSS 2.1 allows us to target elements based on attribute values – we can even match against substrings within the attribute value, which is a perfect fit for finding the file extensions of our links. The number of potential choices for attribute selectors alone is more than we can reasonably build into a single plugin, but fortunately SuperSelectors supports arbitrary selectors through the additionalElementHash attribute. This can be done with or without overriding the default classnames. A setup which addressed the file-type requirement mentioned above would look like this:

$(document).ready(function() {
  $(document).superSelectify({additionalElementHash: {jpeg: 'a[href$=".jpg"]', pdf: 'a[href$=".pdf"]', doc: 'a[href$=".doc"]', gif: 'a[href$=".gif"]', xls: 'a[href$=".xls"]', png: 'a[href$=".png"]'}});
});

A little more effort than the no-argument invocation, but that will enable matching almost any elements you can think of – you’re only limited by jQuery’s selector support, which is one of the best out there.

Hovercraftiness

It’s probably time to acknowledge the elephant in the room – specifically, the fact that IE6 only supports the :hover pseudo-selector for anchor tags. Through the years, there have been a variety of approaches to add this in, including Peter Nederlof’s whatever:hover. This is all well and good, but it’d be nice to be able to have one-stop shopping for all our CSS needs. Fortunately, jQuery makes it easy for us to add this functionality into Super Selectors. Declare your :hover rules normally, add an equivalent rule using the hover class, and SuperSelectors will take care of adding / removing the classnames from elements on mouseover.

Faster, faster

Things are really shaping up nicely. Any browser which jQuery supports can now use virtually any legitimate CSS selector, but we can still do better. If we know which advanced selectors our site will need to support, it seems wasteful to have to re-request all those CSS files, and then scan them for matches. In fact, on slow connections, or with sufficiently-large amount of CSS, users could see a page without the added classes for a fraction of a second, similar to the old Flash of Unstyled Content bug.

SuperSelectors makes it simple to avoid the unnecessary request/parsing overhead and display properly-classed markup right away. You just need to pass in all your selectors via the manualSelectors attribute, as a comma-delimited list. As with everything else, it can be used solo or in combination with any other arguments.:

$(document).ready(function() {
  $(document).superSelectify({childClass: "child-element", manualSelectors: 'div.example > ul, ul.sample li:first, input[type="text"], input[type="password"]'}});
});

For complex CSS needs, this may require a fair amount of work. However, this approach saves us from having to re-request and parse all the CSS files in use. Consequently, it will be much faster – especially for sites with large (or large numbers of) CSS files. Check out the example.

One caveat

SuperSelectors does a lot to help enable better CSS selector support across browsers, but it can’t do everything for us. We still need rules in our CSS which use the classes SuperSelectors will add.

Because Internet Explorer will discard the entire rule if it doesn’t understand one of the selectors, we do have to do a little duplication in our CSS. That means that, instead of

div.example > ul,
div.example ul.child {
background: #0f0;
color: #f0f;
}

You should write:

div.example > ul {
background: #0f0;
color: #f0f;
}

div.example ul.child {
background: #0f0;
color: #f0f;
}

In Closing

The goal of SuperSelectors is to make it possible for all of us to start using CSS 2.1 selectors in our everyday work. It doesn’t have CSS3 support (yet), but SuperSelectors will automatically benefit as jQuery adds support for CSS3 selectors.

You can download SuperSelectors as a zip or tarball. Github also hosts the official SuperSelectors repository, if you’re interested in helping make SuperSelectors even better.

One common solution is to use the approach written up at A List Apart, which involves using relative and absolute positioning to make labels appear on top of the associated text input. That approach can be brittle when it comes to more complex layouts, however.

Another common solution is to use inline javascript for onfocus and onblur attributes. This has the advantage of being robust in terms of layout, and is the technique currently in use on several of TOPP’s sites (including four instances on the LivableStreets.com groups page):

This approach is not without drawbacks, though. Inline markup is never as elegant as listeners added via javascript, and can pose maintainability problems. It’s easy for multiple instances of functionally-identical inline javascript within a site to diverge, as users make one-off tweaks to handle specific enhancement requests. Additionally, password fields are problematic, as Internet Explorer refuses to allow modification of the “type” attribute for input elements which have been added to the DOM.

I decided a while back to write a plugin to address these issues. My goals were to provide a tool which:

• Allowed informational text to be added to input elements
• Was flexible enough to allow multiple ways to declare the text to be used, not just through referencing the relevant <label> element
• Would be as robust as possible, in terms of avoiding layout problems
• Would be easy for users to implement

Things are finally far enough along that I feel comfortable sharing my latest jQuery plugin, Inline Info.

Using the plugin

Note: this assumes that you’ve downloaded jQuery (http://docs.jquery.com/Downloading_jQuery) and the jQuery Inline Info plugin (http://github.com/chrispatterson/jquery-inline-info/tree/master). All examples can be used at the bottom of the page (immediately before the </body> tag), or set to fire with $(document).ready

When an element with inline info text loses focus, jquery-inline-info checks to see if the current value matches the info text, before resetting the value & changing the class. This is not normally case-sensitive, but this behavior can be changes by passing in the caseSensitiveMatch parameter:

$('#ex-field').inlineInfoTextify({caseSensitiveMatch: "true"}); //default is "false"

By default, jquery-inline-info will use the title attribute of each input element as the info text. If no title is defined, it will instead use the value of the relevant label element. It’s also possible to specify the info text to use, by passing in the inlineInfoText parameter:

$('#ex-field').inlineInfoTextify({inlineInfoText: "Some very helpful text"});

jquery-inline-info also adds a class to input elements, when they are displaying info text. This class is also customizable, by passing in the inlineInfoClass parameter:

$('#ex-field').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

You can also pass in multiple selectors in a single invocation:

$('#ex-field, #ex-field-2').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

or selectors which match multiple elements:

$('#ex-form input[type="text"]').inlineInfoTextify({inlineInfoClass: "my-custom-class"});

The look and feel of the notice is totally customizable through CSS, and I’ve included a demo in the github repository to show various invocations in action.

Questions? Comments? Enhancement requests to make things more flexible? Put ‘em in the comments. I’m definitely interested in improving things, and about supporting stuff folks need.

Aside: Skitch is Mac-only, but I’ve heard good things about Jing if you’re on Windows. I don’t know of an equivalent solution on Linux, unfortunately.

Skitch does a lot of things well, but one bit of polish which always pops out at new users is the “Click to Clipboard” functionality. Skitch provides lots of ways for you to share your images, and when you click in the appropriate field, the site copies all the data to your computer’s clipboard, and presents a nice confirmation that you’re ready to paste that elsewhere:

I decided to create a workalike function in jQuery, my favorite javascript library. I got a rudimentary version up and running a while back, building on the approach Jeff Larson wrote up, over at http://www.jeffothy.com/weblog/clipboard-copy/.

Today, I was able to get my workalike polished up and turned into my first jQuery plugin – it’s available at http://github.com/chrispatterson/jquery-clipboard/tree/master. There are still some pieces of polish I’m planning to add, but I’m pretty happy with it so far.

Using the plugin

Note: this assumes that you’ve downloaded jQuery (http://docs.jquery.com/Downloading_jQuery), the jQuery Flash plugin (http://jquery.lukelutman.com/plugins/flash/), and the jQuery Clipboard plugin (http://github.com/chrispatterson/jquery-clipboard/tree/master). All examples can be used at the bottom of the page (immediately before the </body> tag), or set to fire with $(document).ready

To add “click to clipboard” behavior to the element with an id of share-link:

$('#share-link').clickToClipboard();

To add “click to clipboard” behavior to all elements with a class of shareable:

$('.shareable').clickToClipboard();

clickToClipboard allows you to customize how long it takes for the notice to fade out, as well as the message used (for cases where you don’t want to use an image).

To have a slower fade effect, starting 1.5 seconds after the target element loses focus:

$('#share-link').clickToClipboard( {fadeoutLength: 900, fadeoutTimer: 1500}););

To customize the notice text:

$('#share-link').clickToClipboard( {clipboardText: "You're ready to paste!"}););

The look and feel of the notice is totally customizable through CSS. I’ve included a demo in the github repository, which shows how it might look with a background image. This is my first jQuery plugin, so I’m definitely open to feedback on ways to structure things better, or enhancement requests on how it be more flexible about supporting stuff folks need.