Unconventional: CSS3 Link Checking

One of our regular writers Wess Cope lives by the principle that you should seek to push technology past its intended uses and beyond even its own limitations. From time to time we will be featuring unconventional uses of technology. Today, we look at unconventional CSS3:

The Problem

As a developer, you are rapidly building your newest web creation. You start with the HTML, knowing full well you don’t have the hyperlinks you will need to complete the design. Nonetheless you put in:

<ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Contact</a></li>
   ...
</ul>

What seems like a long time later, you get to the point where you finish up your site for demoing or production. How do you quickly find all those empty links? Well, you could use a link checker… or, just use CSS3!

CSS3 Solution

Just paste this line to the end of your last included CSS file for a quick visual display:

/* Find all links where an href is not provided */
html body a:not([href]), html body a[href='']  { background: red !important;}

Then open your site in modern browser that supports CSS3, and any empty link now has a background of red. Edit your HTML, and check the page again. When all the links are fixed, none will have a red background!

You can see for yourself by checking a quick demo:
Standard Page | Page With CSS3 Link Checking

Bonus: Testing Progressive Enhancement

For mission critical functionality it is generally good practice to have a fallback for non JavaScript users. To test if your page has any JavaScript only code, add this rule to your CSS file after the rule we just added:

/* Find all links where the href = # */
html body a[href='#'] { background: yellow !important;}

Next, disable JavaScript in your browser (In Firefox and Safari it is an option in your preferences.).

Now, any of those links you cleverly enhanced with JavaScript, but forgot to add a valid fallback URL, will show up with a yellow background. If an item truly has application only when JavaScript is enable, you should consider adding it dynamically with JavaScript.

Variations

As a leftover vestige from IE6 days, many developers use href='#' so signify an empty url (So the :hover pseudo selector will still work). If this is your case, you have two options: 1) Change your style going forward and use href='' to signify an empty URL and href='#' for JavaScript enhanced links. or 2) Use only the second CSS3 rule and change the color to Red.

Doug Neiner is an Editor at Fuel Your Coding and an official member of the jQuery Team. He is addicted to new technology, and specifically loves spending time with WordPress, Ruby on Rails and jQuery. Learn more via twitter or his Google Profile.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote