Indicating File Types with Dynamically Added Icons CSS3

To get started, download the exercise files for this chapter at stunningcss3.com and open selectors_start.html in your code editor of choice. Its CSS is contained in a style element in the head of the page. So you can also use your final page from Chapter 3 as your starting point here. Throughout the page, there are links to documents to download, in these file types:

PDF _ MOV
DOC _ JPG

In some cases, we’ve indicated the file type to the user by putting it in parentheses at the end of the link text, such as “Map of trip locations (PDF).” we want to give users a heads-up that clicking on certain links might launch additional applications, like Acrobat Reader, or prompt them to save a file. But we are human being—we may not remember to add this file-type notice at the end of every link that could benefit from it. Or what if this page was part of a content-management system (CMS), and my non-technical client was adding links? He might be even less likely to remember to add these friendly file-type warnings.

A more foolproof way to add some sort of file-type indicator is to use attribute selectors, which would have the browser take care of it automatically.

Every link ends with a file-type extension, so we can use the “end of the value” attribute selector to examine the extension and add the appropriate icon as a background image on the a element.

First, prepare the a elements inside the file-download lists to have background images added to them:

This makes the links block elements with a minimum height matching the height of the icon images, so the icons won’t ever get cut off. It also adds left padding to create empty space for each icon to sit in. Each icon background image will display only once (no-repeat) and be positioned three pixels down from the top of the link (0 3px) to align it with the top of the text.

Now we can add the attribute selectors to target each file type extension:

The href$= part of each attribute selector tells the browser “find every href attribute that ends with,” and then the values in quotation marks, such as .pdf, give the ending attribute value to match against.

When the browser finds a match, it applies the background image indicated, adding appropriate icons to all the links .

Each link now has an icon beside it to match its file-type extension.

Each link now has an icon beside it to match its file-type extension.

Alternative Icon Ideas
We’re finished with the styling for the link icons, but you could take attribute selectors even further if you wanted to.

SAY IT INSTEAD OF SHOWING IT
The icons are a nice little hint to help your users, but if you wanted to be even more obvious and explicit, you could use generated content to write out the file-type extension at the end of each link instead of or in addition to the icons.

You’d first need to make sure that this information wasn’t already manually written in each link. Then, you could add the following rule, for example, to write out “(PDF)” after each link to a PDF file:

COMBINING MULTIPLE ATTRIBUTE SELECTORS
As with almost any other type of selector, you can combine multiple attribute selectors into one to give you even more fine-grained control over what you want to target. For instance, what if you wanted to show the photo icon for links to PNG images, but a chart icon for links to PNG images that also happened to be charts? Depending on how your images are named, this selector would work:

This selector tells the browser “find all links that have ‘.png’ at the end of their href attributes and have ‘chart’ somewhere in the href attribute.”

So all of the following links would get matched:

Fixing IE 6 IE
6 is the only major browser that doesn’t support attribute selectors and doesn’t show the icons. The only way to work around this is to add a script that provides support for attribute selectors.

ADDING AN IE-FIXING SCRIPT
One such script that makes the advanced selectors already present in your CSS work is Dean Edwards’ script, confusingly named IE7. You can download the script and link to that local copy, or you can link to the public copy hosted on Google Code. Linking to the public copy has the advantage that visitors to your page may already have the script in their cache if they’ve visited another site linking to it, making the page load faster for them.

Add a link to the public copy of the script in the head of the page, inside an IE 6-only conditional comment:

The script makes IE 6 understand the attribute selectors so the icons show up, but it does weird things to the spacing and wrapping of the links. To fix these issues, we need to make the links inline-block and set white-space to nowrap, but this causes minor problems in other browsers. So, we’ll use the same conditional comments html tag trick that we used earlier to create a rule that only IE 6 can read.

Go to the opening html tag of the page, and change it to the following

HTML:

Now you can add an IE 6-only rule:

IE 6 now displays like the other browsers—as long as JavaScript is enabled. If an IE 6 user has JavaScript off, she won’t see the icons. This is fine—they’re an enhancement, not necessary pieces of content. But with JavaScript off, IE 6 will still read the ul a rule, which adds extra padding to each link, creating unnecessary empty space between the links in IE 6. To get rid of this, add an [href] attribute selector to both the ul a and .ie6 ul a rules:

These rules now target all a elements that have href attributes inside the ul elements—and since all the a elements have href attributes, the rules match exactly the same links as before the attribute selector part was added. But when JavaScript is off and IE 6 doesn’t understand attribute selectors, it will ignore both rules completely now, getting rid of the extra padding and other styling that they add.

USING A JAVASCRIPT LIBRARY
An alternative to using the IE7 script as we’ve just done is to use a JavaScript library or framework that has attribute selectors built into it, and then write them into your own script to accomplish whatever effect you want. The downside to this is that your script wouldn’t take into account the attribute selectors already present in your CSS and make them work; you’d have to recreate them in your script instead. But if you’re already writing a script to take care of some other effects in your pages, it might be better to throw in the selectors you need instead of adding on the IE7 script to your pages.

The article “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery” gives an example of how to use the attribute selectors available in jQuery to create a custom script to add icons to links.

Most major JavaScript libraries, such as jQuery and MooTools, have attribute selectors built in, and there are a few JavaScript libraries exclusively devoted to selectors. These include:YUI Selector Utility

Sizzle
Sly

There are also some scripts that sit on top of a JavaScript library to take advantage of its advanced selectors without requiring you to write your own selectors—they simply detect the selectors you already have in your CSS and make them work. Keith Clark’s Selectivizr script is a great option.

Simpy add the script to your page, plus one of the seven corresponding JavaScript libraries, and attribute selectors will work in IE. If you’re using jQuery, another option is the jQuery SuperSelectors plugin.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics