The author, Dean Edwards, claims that "it fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6."

It's apparently been updated fairly recently. If it works, to quote Eric Meyer:

In the main, it will be a lot less painful to clear out the hacks with IE7 (the script) available than without it. A lot.

Charles Cooke wrote a nice introduction to using the library.

DLB's latest project is a website with some content-complexity, using Wordpress as a Content Management System. Wordpress is functional as a custom CMS largely because of Custom Fields, which allow you to assign an arbitrary amount of meta-data to a post (the core element of a Wordpress site).

Now, on this website, it came about that some of the pages needed specific Javascript classes and methods, and even more than that needed custom CSS classes.

Immediately, it occurred to me that this could be handled through custom fields. So, what I did, and you can do, too, is create two custom fields: one called custom_css and one called custom_js.

Put the fully qualified URI of the file into a custom field.

With this accomplished, edit your Wordpress theme's header.php, and write a couple little PHP conditionals to check for this field. Or else, just copy and paste mine!

Read More...

Background

reCAPTCHA is a free CAPTCHA service that helps to digitize books.

A CAPTCHA is a program that can tell whether its user is a human or a computer, by asking the user to copy some distorted text. You've probably seen them, either here, or elsewhere on the web. If not, just click here for an example.

The Internet Archive is going to help Spidey enter "the digital age".

reCAPTCHA gets these words from books that the Internet Archive is digitizing. Digitizing books is done by photographically scanning the book's pages, and then transforming these scans into text using "Optical Character Recognition" (OCR).

All this together means that when you leave a comment, in addition to contributing to the discussion, you are both proving you are a person, not a spambot, and helping humanity's effort to archive it's knowledge digitally.

The Problem

Which is all milk and honey, but there's a problem. As good citizens of the web, and as Wordpress users, BlogLESS utilizes reCAPTCHA's handy Wordpress Plugin. But, as good citizens, BlogLESS is further committed to web standards. This means that all our HTML and CSS needs to be valid. Unfortunately, the Wordpress reCAPTCHA plugin doesn't validate XHTML out of the box. (As it turns out, this is not its fault. It actually can't validate out of the box, which we'll see.)

The good news is, the fix is easy, once you understand the problem. You don't need to be a pro to make your Wordpress comments template valid again.

Read More...

On this fine July morning, like to just take a moment of your time to eulogize what is, as far as I'm concerned, the most useful CSS trick I've ever run across. I've used this about five hundred times in my life, and I wanted to take the opportunity to address it to you, good reader, as if by some chance you haven't yet run into it.

I've chosen this opportunity, partially, because trend leader 37signals announced last week that they're dropping support for IE6 in their products. Which, in my immediate (albeit short-lived) joy, caused me to imagine a world where we could all stop supporting IE<=6, and, subsequently, in which this trick would become even more elegant and universal.

This trick was introduced to us all under the sign of How To Clear Floats Without Structural Markup. It is a trick developed by Tony Aslett and published at Position is Everything.

It makes it possible to clear floats without any unnecessary, unsemantic or hacky structural markup.

Read More...

Some time ago, we were working on a website that required a contact form with the ability to attach a file. This sounds like, at this point in web design, it should be incredibly simple. Imagine my chagrin as I learned that, in fact, styling the FileUpload Object had a smack of Holy Grail-ness to it. Well, at least as far as HTML form objects are concerned.

A lot of people have had similar ideas on how to handle this. I suppose it all started with Michael McGrady's solution, which was followed closely by an improvement on McGrady's technique from Peter-Paul Koch over at Quirksmode. The closest thing I found to a satisfactory solution, though, came from Shaun Inman. His solution was definitely the right idea, but it wasn't exactly full-featured, and I wanted it built in my favorite Javascript framework.

Read More...

Now more than ever, our clients want cool AJAX components for their sites. It seems like more often than not, we find ourselves creating whiz-bang image galleries, file upload forms, and a variety of other interactive components. These components can be tasteful and add much-needed fun to an otherwise run-of-the-mill interaction experience, so we like doing it.

One of the things we don't like about it, however, is the ease with which web standards can be thrown out the window in the "getting it working" part of the component development. One of the most frustrating culprits is often the family of tags that are required to generate CSS-based opacity effects for interaction elements.

Now, I am generally against using Javascript to apply unsupported CSS definitions as a salvo against the mean red screen of the CSS validator. This is usually a bad idea because, among other reasons, it can fail to degrade gracefully if the user doesn't have Javascript, and it provides a strategy to allow invalid CSS validate in cases where it really shouldn't, it's a little bit clunky when compared to other available methods, and frankly, introducing Javascript into the equation just to validate CSS rarely seems worth the trade-off. That said, in this situation, I think it's legit because:

1. The opacity definition(s), while being supported by all current major browsers and darn useful, isn't included in the CSS 2.1 spec, despite apparently being part of the jetpack-esque CSS 3 spec (::someday::), and doesn't validate.
2. In the case of an AJAX component, you're already requiring that your users have Javascript enabled, and hopefully you have a graceful exit strategy already in play if they don't.
3. Your only other choice to achieve the effect you want is to use something like Flash, which is certainly worse even than invalid CSS.

So let's take a look at how to save your opacity effects and your valid CSS using some handy DOM scripting.

Read More...

We all know the scenario. Some movie protagonist is facing some movie antagonist, and the antagonist tells him to choose who dies, his (insert family member) or his (insert other family member). Always, always our good-hearted protagonist offers himself first. Only very rarely does this work.

Donnie Darko, because his enemy is metaphysical, chooses himself. Ontic enemies rarely allow this.

The rest of the time, our insidious villain makes some smart comment, and we're back to square one. The Internet Explorer team's smart response to our valiant attempt to save all our users was to provide us the conditional comments specification. Please note, the villain will never just decide to give up his evil ways at this point. Never.

Read More...