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.
Grab the Feed
This is awesome. I dind’t know you could do such a thing with CSS3. Thanks Doug!
Thanks! What a simple solution for such a common problem.
Excellent! Thank you~
It might be quicker to that with jQuery (assuming you use jQuery in all your projects, like I do)…
Awesome idea man, and thanks for the shout out!
Another method that I like for this is to print out all of the source code… then walk slowly over it with holding a divining rod. Read more about this method http://en.wikipedia.org/wiki/Dowsing
thanks for this article…it will save me a lot of time…CSS3 rocks
‘Used to do something similar for accessibility testing. For instance: to make sure you don’t forget to provide alt-text for an image. I used Greasemonkey, though, since I prefer to do everything the complicated way. :)
Great technique!
Great, although we can do it easier via jQuery but using pure CSS is better!
Great tips :-)
Absolutely brilliant tip. I used your code and then also modified it to look for “rel” links so you can check quickly that all the external links have that attribute. Thanks for the heads up!
html body a:not([href]), html body a[rel="external"] { background:#990 !important;}
What about:
I suppose it doesn’t show but you would be selecting an extra element.
Kick-ass! How extremely clever of you, Doug. Thanks for writing about it.
Nice tips, will be in the standard-css next time.
Thats really cool! Amazing idea, like it! That i don’t have to use jquery or any other js lib is quite cool thing.
Nice solution for finding empty interior links, within your content. However, I don’t see how this should be a common problem to run into with regards to your main level or secondary navigations. You don’t click on your nav links to make sure they go to the right place before demoing, or taking a website live? Seems like you need to add a critical step to your process. Also, how are you implementing your web nav? Generally, good practice is to use an include file or master page that contains your nav items in one file. It’s not that hard to manage links when they are located in one central location.
Excellent idea, hadn’t thought of using not() in that way! There’s probably a load of other really useful things like this that CSS3 can do for us!
yes this is nice but i make it like this
html body a[h1] { background: yellow !important;}
But it doesn’t work!