Reveal new window links and links to non-HTML files with a user stylesheet

As I stated in Make Safari open targeted links in new tabs instead of new windows I find links that open in new windows highly annoying.

One reason that new windows can be so intrusive is that most browsers don’t make it obvious to the user that clicking a link is going to open a new window (or a new tab, depending on browser configuration). If it was really obvious before you click a link that it will open in a new window, at least you’d be prepared for it.

Well, there is a rather simple way of achieving this by adding a few CSS rules to a user stylesheet. For some reason this never occurred to me until Jim Wilkinson mentioned it to me in an email response to the article about Safari that I just mentioned. Thanks Jim!

Highlight links that open in a new window

Based on Jim’s tip, here’s the CSS I use to highlight links that open in a new window (does not work in IE 7 or earlier, but IE 8 will have support for CSS generated content):

  1. a[target="_blank"]:before,
  2. a[target="new"]:before {
  3. margin:0 5px 0 0;
  4. padding:1px;
  5. outline:1px solid #333;
  6. color:#333;
  7. background:#ff9;
  8. font:12px "Zapf Dingbats";
  9. content: "\279C";
  10. }

This will insert a box with a “heavy round-tipped rightwards arrow” before any links that have a target attribute with a value of _blank or new. 279C is the hexadecimal code for that character, taken from the Dingbats (PDF file) Unicode code chart. I specify the “Zapf Dingbats” font to make sure that the character is available.

You may want to choose a different character and a different font, depending on what is available on your computer. Just change the content and font properties to whatever you prefer. Likewise if you think the style of the box is too intrusive, just change the colours to something you like.

Highlight links to PDF and Word files

Another common kind of obtrusive links open PDF or Word files without informing the user. To highlight such links I use the following:

  1. a[href$="pdf"]:after,
  2. a[href$="doc"]:after {
  3. margin:0 0 0 5px;
  4. font:bold 12px "Lucida Grande";
  5. content: " (PDF)";
  6. }
  7. a[href$=".doc"]:after {content: " (DOC)";}

This will insert either (PDF) or (DOC) after links with an href attribute value that ends in pdf or doc. I insert this information after the link instead of before it since it’s fairly common for links to PDF and Word files to also open in a new window, and I want to be aware of both.

Tell your browser to apply the stylesheet

How you apply these rules to all sites you visit depends on which browser you use. Here’s how to do it in Safari:

  1. Create a file with the CSS rules you want to apply
  2. Open Safari’s preferences window from the “Safari” menu and activate the “Advanced” panel
  3. Choose “Other…” from the “Style sheet” menu
  4. Locate and choose the file you created in step 1
  5. Close the preferences dialog

If you don’t use Safari, consult your browser’s documentation or do a Google search for “user stylesheet x”, where “x” is the name of your browser. You may also find About.com’s User Style Sheets instructions useful.

No more surprises when clicking links

Applying these rules will of course affect the way many websites look, and may occasionally cause minor layout problems. Links that already alert the user that they will open in a new window or point to a non-HTML document will also be affected, so the information will be repeated.

However, that is a small price that I am willing to pay to reveal obtrusive links before I click them.

Posted on December 15, 2008 in Accessibility, CSS, Usability

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.