Alternative for class="application-pdf"

Information and discussion on Cascading Style Sheets.

Moderators: rcrisler1, saltybeagle

Alternative for class="application-pdf"

Postby smeranda » Tue Jan 09, 2007 2:33 pm

I love having the icons next to links to "non-web" documents (.pdf, .xls, .doc, etc...). However, it never fails that I inadvertently miss a couple of these when creating the links. And when I do remember to add the class, I always have to look up the name.

So I decided to come up with a better way to using this. It boils down to a few things: CSS selectors and JavaScript.

With CSS selectors, we can create a CSS rule to automatically apply a style definition based on the href value:
Code: Select all
a[href $='.pdf'] {
   padding: 3px 18px 0px 0px;
   background: url(/ucomm/templatedependents/templatecss/images/mimetypes/application-pdf.gif) bottom right no-repeat;

This automatically adds the icon to each link that ends in ".pdf" (hence the links to .pdf documents). No more having to manually add the class each time!

The one issue with this is the lack of support for IE6 and lower. The solution for this is to use JS to apply the original CSS class ("application-pdf") to the A tag. Since I have jQuery loaded on my pages, I created a rule which will run if the browser is IE6 or lower and will add the original CSS class to the A tag.

Code: Select all
$(document).ready(function() {
     @if   (@_jscript_build < 8832)

Now I never have to add the class manually again!

Unfortunately, the icon won't appear for IE6 users with JS turned off, but compromises have to be made. Since I was already missing some links this will work to my advantage!
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest