Identify External Links On Your Page Use CSS to mark external links

[jlhaslip 4]

Identify External Links Using Cascading Style Sheets

Accessibility on the Web includes making the client aware of the links which open a new window (or tab). Here is a method to do that by simply adding one line of Cascading Style Sheet code.

By adding this rule, and changing the Domain name (of course), we ask the Browser to "tag on" a symbol at the end of the link text.

a[href^="http://"]:not([href*="your.domain.com"])::after {content: "\27A0";}

There are many symbols available in UTF-8 and the one I have chosen for this Demonstration is not the final answer. Feel free to choose the one you want.
Chose the symbol of your choice from the many symbols available in the utf-8 list. There is a link on the Demo for a full list of your choices.

As a demonstration, here is a link to a page that has the rule applied to it: http://forums.xisto.com/no_longer_exists/

Enjoy.

[rpgsearcherz 5]

I am sure others have the same issue as me regarding this, so I'll ask...What is this for? Looking at the links on your demo page I didn't see anything different there as compared to just using normal links. Like what is the "content: "\27A0"" there for?

[truefusion 3]

I am sure others have the same issue as me regarding this, so I'll ask...What is this for? Looking at the links on your demo page I didn't see anything different there as compared to just using normal links. Like what is the "content: "\27A0"" there for?

The \27A0 is that arrow symbol you see at the end of each external link. I have had a similar idea for my website a long time ago to help distinguish links that would cause a new window or tab to open by using CSS to place a symbol or image after every link whose target attribute had the value of "_blank", but i don't really have any links that have that attribute with that value on my site, coming from my scripts at least. You've probably seen these kinds of links in many places, mostly dominant in wikis. I haven't checked the source code of the wikis, so i'm not sure if they used CSS or a server-side scripting language to detect what kind of link it is, but that is basically how it would be done using CSS.

[Baniboy 3]

This is great! I didn't know you're able to do this in css! I've always used javascript for this. Thanks a lot. I don't know exactly what was the code but it was something that wrote target="_blank" in the link if it started with "http". Someone here that knows javascript could figure out the code. Anyway thanks for the code haslip I'll use this on my website (if you're not gonna charge payperclick method on the links for people borrowing the code )

[rpgsearcherz 5]

These "arrows" you all talk about. Are they actual pictures(visible)? I'm on IE7 and I see nothing. They just look like normal links to me. Is it my browser or am I still misinterpreting what this is about?

[jlhaslip 4]

Likely a Browser issue. This technique requires the Browser to be CSS Spec 2.1 capable.
The specification for this feature is discussed here at the W3C site.

Quoted from 456bereastreet dot com :

Internet Explorer up to and including version 6 has incomplete support for CSS 2.1 selectors. The following are unsupported or problematic:
* Child selectors
* Adjacent sibling selectors
* Attribute selectors
* Multiple class selectors
* The :first-child pseudo-class
* The language pseudo-class
* The :before and :after pseudo-elements
* The :hover pseudo-class only works on a elements
* The :focus pseudo-class isn’t supported. For a elements that have focus, the :active pseudo-class is applied.

Fortunately, it looks like Internet Explorer 7 will have complete support for CSS 2.1 selectors.

I will track down another reference for the issues relating to this technique.

*edit*
Here is a very extensive chart of the CSS Specifications and how they apply/don't apply to IE products form IE4 to IE8 and the attributes that work/don't work.

http://forums.xisto.com/no_longer_exists/).aspx#intro

It will give you a very good idea about the availability of Selectors and Attributes when targeting IE Browsers.

[jlhaslip 4]

I am sure others have the same issue as me regarding this, so I'll ask...What is this for? Looking at the links on your demo page I didn't see anything different there as compared to just using normal links. Like what is the "content: "\27A0"" there for?

Attached is a Screenshot of the Link List you would be seeing with a CSS2.1 or CSS3 compliant browser.Those arrows are not images, but UTF-8 symbols. a 'print' character what gets added to the URL string in the Anchor tag. No Images required, but a Standards Compliant Browser will display them based on the href in the anchor matching (or not) the defined http string in the anchor.

[rpgsearcherz 5]

Ohhh, I see now. Thanks for the picture, it helps a lot to understand this.So IE isn't compatible, . Yet another thing that only works on Firefox and other "better" browsers.It seems like Microsoft is falling behind.

[Baniboy 3]

Ohhh, I see now. Thanks for the picture, it helps a lot to understand this.
So IE isn't compatible, . Yet another thing that only works on Firefox and other "better" browsers.

It seems like Microsoft is falling behind.

"Seems"??? I think M$ has already fallen on it's *bottom* in browser battles, why don't they just make it open source or even compatible with standards?! It's just a pain to adjust stuff just because most people use that stupid browser! Why IE even isn't open-source?, M$ isn't making any profit of it anyway? or is it?

[flashy 0]

Wow thats awesome!I never knew a thing about that sort of thing - thanks budThe only thing is, that it doesnt work in IE - but i guess this thing would be easier to do in php

Edited February 20, 2009 by flashy (see edit history)

[miladinoski 1]

Ohhh, I see now. Thanks for the picture, it helps a lot to understand this.

 

So IE isn't compatible, . Yet another thing that only works on Firefox and other "better" browsers.

 

It seems like Microsoft is falling behind.

What is the meaning of those quotation marks?

 

Can you see the thing in the quoted text below that makes IE behave like poo?

Attached is a Screenshot of the Linl List you would be seeing with a CSS2.1 or CSS3 compliant browser.

Those arrows are not images, but UTF-8 symbols. a 'print' character what gets added to the URL string in the Anchor tag. No Images required, but a Standards Compliant Browser will display them based on the href in the anchor matching (or not) the defined http string in the anchor.

You see, the problem with IE isn't Microsoft, but the people who when having the knowledge of other browsers refuse to use anything other than itm and this can be said mainly for the american browser market where IE is still used like it was in the 90's. That's all.

 

Making IE compatible pages will soon fall out of league because either:

Microsoft will develop IE and make it support standards OR

More and more people will ignore it and it'll soon be outdated and rarely who'll use it.

Speaking of which, the first is probable but knowing the past of Microsoft, highly unrealizable; the second is not very probable, but realizable if Microsoft refuses to do something with their horrid standards support.

[rpgsearcherz 5]

I see what you mean by it but really...Why download and bog your PC down with more stuff if you don't necessarily have to?I would much rather see IE step up their game but it's not a huge issue to most of us. There's just really not enough justification for a lot of us to switch.

[truefusion 3]

Why download and bog your PC down with more stuff if you don't necessarily have to?

Since i know you're a gamer, this question so relates to you. Therefore, either bogging down a system is irrelevant or there really is no bogging down of the system. It's in a way special pleading. Also, if i'm not mistaken, in Vista you no longer require Internet Explorer for updating the system, so uninstalling Internet Explorer (if at all possible ) would solve your "dilemma." Albeit, i have around three different browsers installed on here and it in no way bogs down the system. But Linux is known for good memory management, so that could be the case.

I would much rather see IE step up their game but it's not a huge issue to most of us. There's just really not enough justification for a lot of us to switch.

We would all like for Internet Explorer to pick up the ball a bit. Actually, many of us have been waiting a long time for them to do so, even now we're still waiting. Microsoft, who has hundreds of people working for them, appears to be doing more work on their other products, mostly the ones they make money off of, than Internet Explorer. While all the other popular browsers have and are coming out with major releases and many minor releases, it's taking Internet Explorer forever just to come out with one major update, that is, Internet Explorer 8. Sadly, even when Internet Explorer 8 becomes stable, the chances of it not even scoring 50 points on the Acid 3 test are really high.
As for justification for switching while many sites work with Internet Explorer, that's being worked on. Some are even saying by Microsoft itself. All we need are more Vista moments.

[rpgsearcherz 5]

Since i know you're a gamer, this question so relates to you. Therefore, either bogging down a system is irrelevant or there really is no bogging down of the system. It's in a way special pleading. Also, if i'm not mistaken, in Vista you no longer require Internet Explorer for updating the system, so uninstalling Internet Explorer (if at all possible ) would solve your "dilemma." Albeit, i have around three different browsers installed on here and it in no way bogs down the system. But Linux is known for good memory management, so that could be the case.

We would all like for Internet Explorer to pick up the ball a bit. Actually, many of us have been waiting a long time for them to do so, even now we're still waiting. Microsoft, who has hundreds of people working for them, appears to be doing more work on their other products, mostly the ones they make money off of, than Internet Explorer. While all the other popular browsers have and are coming out with major releases and many minor releases, it's taking Internet Explorer forever just to come out with one major update, that is, Internet Explorer 8. Sadly, even when Internet Explorer 8 becomes stable, the chances of it not even scoring 50 points on the Acid 3 test are really high.

As for justification for switching while many sites work with Internet Explorer, that's being worked on. Some are even saying by Microsoft itself. All we need are more Vista moments.

Well about your first point relating to the gaming aspect, I only run what is necessary to play games. I score much higher framerates on a lot of games than my friends who have better systems, solely because I keep anything unnecessary out.

As for uninstalling IE, I didn't know that it was possible on Windows...I'll definitely look into that though.

And you may really not notice a difference with installing multiple items, but that's most likely due to Linux as you said. On Windows every program adds new things to both your startup and to the registry. The registry will slow down your PC to a crawl - even if you uninstall programs(because it leaves the keys there and so it thinks programs still exist). That part is 100% Microsoft's fault.

And really I haven't found anything IE can not do(aside from the arrows noted in this thread) that the rest can. But then again when I'm using my browser it is just to check forums or read up on something or another. I deal email and everything else in other programs.