Welcome to WebmasterWorld Guest from 54.242.250.208

Forum Moderators: incrediBILL

Message Too Old, No Replies

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

Identifying target="_blank"

     
9:58 pm on Oct 15, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


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?
12:03 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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

2:17 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


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.

2:31 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


This is amazing. A much improved browsing experience already.
6:39 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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;}
7:15 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:728
votes: 0


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

7:24 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


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.

7:29 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


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.

8:49 am on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


_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;}
2:37 pm on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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

4:14 pm on Oct 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


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;
}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members