Firefox: How to get a visual cue if a link is to open in new window?

Identifying target="_blank"

[Clark]

Is there a custom css or some way I can customize firefox to give me a visual cue whether a link is set to open in a _blank window, a _top window or some named window?

[createErrorMsg]

Assuming you're looking for a way to detect this as you browse someone else's site, the code below in a user stylesheet will highlight any links with a target="_blank" attribute red...

a[target="_blank"]{background:red;}

This uses the attribute selector [w3.org], which is not supported by IE browsers, so it doesn't work there, but in FF and O it works like a charm. If you use the WebDev toolbar in FF, just save the code to a css file on your computer, click the "Add User Stylesheet" option in the CSS button, browse to the stylesheet and select it. If you want it to apply that CSS as you surf around, go to Options and check "Persist Styles."

In Opera it's Tools>Preferences>Advanced Tab>Content>Style Options...browse to the CSS file and then enable it by checking the "My Stylesheet" checkbox under which ever profile you're using.

If, instead, you're looking for a way to visually cue all visitors to your site that a link will open in a new window, you could use the above code, but IE users wouldn't get it. A more labor intensive, but cross-browser, way would be to mark outbound anchor tags with a special classname and apply styling to that...

html:
<a href="#" class="outbound" target="_blank">Link</a>

css:
.outbound{background:url(images/outbound_icon.gif) left no-repeat;padding-left:15px;}

cEM

[Clark]

Fabulous, many thanks. I will try it on my browser.

It would be cool if it became trendy for webmasters to apply the second stylesheet on their sites, because even applying it on your site(s), a new user won't know what it is unless you explained it and they happened to pass by that explanation page on your site.

[Clark]

This is amazing. A much improved browsing experience already.

[Robin_reala]

cEm's method only takes care of the target=_blank secanario. I think however that your original request was even easier. If you want to be warned what the link targets anything tht's not the current page then this code will do that:

a[target]{background:red;}

[bedlam]

Another method for delivering styles to IE on the basis of attributes is to use JS expressions in your stylesheet (ideally an IE-only stylesheet). I haven't tested this particular code fragment, but I think it should work:

a { color: expression(this.target=="_blank"? '#900' : '#000'); }

For more details see this thread [webmasterworld.com], or this one [webmasterworld.com].

-B

[Clark]

I'm having a bit of trouble getting it to work consistently. It might be because I have several tabs open and haven't been able to restart FF yet. But sometimes it just doesn't show up even though I assigned the stylesheet to each tab separately.

Will try the new code btw.

[Clark]

a[target]{background:red;} shows me links on this very page that should open in a different target but open in this window.

The other code didn't always show a link but when it did, it always opened in a new page.

[Robin_reala]

_blank window, a _top window or some named window?

a[target] selects those 'a' elements that have a target attribute. If you're finding that's too wide a spectrum of links then this code will do just _blank and _top:

a[target="_blank"],a[target="_top"]{background:red;}

[createErrorMsg]

Or for a bit of differentiation...

a[target="_blank"]{
background:red;
}
a[target="_top"]{
background:blue;
}

I posted just the one assuming it would and could be adapted to meet other needs. :)

cEM

[Clark]

Good idea :)

I'm going to try to make the most sense here and cover the standard targets in a logical way and then ask you how to add "all other" targets at the bottom of this.

Two questions first.
1. Does anyone have experience with the _parent target? How does it work exactly?

2. Isn't "_new" the same thing as _blank? I just looked it up and don't see _new listed so maybe my memory fails? Anyway, the code below assumes it's the same.

a[target="_blank"]{
background:red;
}
a[target="_new"]{
background:red;
}
a[target="_top"]{
background:blue;
}
a[target="_self"]{
background:blue;
}
a[target="_parent"]{
background:purple;
}
a[target="XXXXXXX_for_other?_XXXXXX"]{
background:green;
}