[CSS / Javascript] Externe links een andere kleur geven oid

[Reveller]

Als ik links op mijn website die naar een externe pagina wijzen, in een andere kleur wil weergeven, gebruik ik voor standards-compliant browsers:

Cascading Stylesheet:

a[href^="http:"] { /* interne links zijn relatieve paden */
  color: lime;
}

Dit werkt dus alleen niet voor IE. Ik heb via Google gezocht of er een work-around was, maar die is er niet. Nu vraag ik mij het volgende af:

• is er een cross-browser pure css oplossing hiervoor?
• is er bekend wanneer IE css3 selectors gaat ondersteunen?
• zou dit probleem anders met javascript op te lossen zijn, en zo ja - kan iemand mij een ruw idee hierover geven?

Ik denk dat vanuit het oogpunt van gebruiksvriendelijkheid het erg prettig is om visueel (dmv kleur, achtergrond plaatje of wat dan ook) aan je bezoeker te laten zien wat interne en externe links zijn, of welke links in een apart scherm zullen openen. Toch is er weinig cross-browser informatie hierover te vinden

[Verwijderd]

Wat betreft ondersteuning in IE qua CSS3 zou ik niet weten maar zou eventueel een richting kunnen aangeven waar je het met Javascript zou kunnen zoeken.

Je zou een functie kunnen schrijven die je bij de trigger van onload laat oproepen. Deze functie loopt dan met getElementsByTagname("a") alle <A> elementen af binnen het geladen document en wijst aan ieder element van de teruggekregen DOM-tree een andere standaard CSS class toe dan dat interne links krijgen ( met regexp of andere functie checken op 'http:' zoals in je voorbeeld ). Je zou ook nog de standaard class verwijzingen van de interne links achterwegen kunnen laten en verwerken in de functie. Ik denk dat dit een eventuele work-around zou zijn.

[ Voor 3% gewijzigd door Verwijderd op 28-12-2005 20:15 ]

[MTWZZ]

Met javascript ga je nog problemen krijgen. Als je de href van een a element opvraagt krijg je (in FF en IE) altijd de volledige link terug.
Update:
Dit werkt wel:

HTML:

<a href="#">local</a>

JavaScript:

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
    // geeft http://host/#
    alert(links[i].href);

    // geeft #
    alert(links[i].attributes['href'].value);
}

[ Voor 53% gewijzigd door MTWZZ op 28-12-2005 20:44 ]

[Zoefff]

Ik zou niet bekijken of er "http://" in een link staat, maar een apart attribuut aan externe links toevoegen (als dat mogelijk is natuurlijk).

HTML:

<a href="#" rel="external">blaat</a>

Met CSS kan je vervolgens de kleur (voor standards-compliant browsers) veranderen met iets als:

Cascading Stylesheet:

a[rel="external"] {
    color:#FF0000;
}

Voordeel is dat je er nu met javascript veel makkelijker dingen aan kan hangen. Zo gebruik ik een script dat de "external" links in een nieuw venster opent, maar ik denk dat je op die manier ook relatief eenvoudig de kleur kan veranderen

[djluc]

IE ondersteund wel expressions in CSS. Dan kan je wat JS in je CSS hangen. Misschien kan je daar wat mee.

[Reveller]

Zoefff schreef op woensdag 28 december 2005 @ 20:52:
Ik zou niet bekijken of er "http://" in een link staat, maar een apart attribuut aan externe links toevoegen (als dat mogelijk is natuurlijk).

Dat is dus niet mogelijk Ik kan alleen zaken veranderen nadat de pagina gerendered is, door bv. mbv. javascript de DOM aan te passen.

Ik gebruik nu overigens het volgende scriptje:

JavaScript:

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
  if ((links[i].attributes['href'].value).indexOf('http://')) {
    document.links[i].setAttribute('class', 'external');
  }
}

Het is alleen bizar dat juist de links die niet beginnen met "http://", als class 'external' meekrijgen?

Ik ga dit scriptje eerst eens goed testen overigens. Er zullen ook wel wat regexpen bij komen kijken, om bv. een interne link naar een subdomein, niet mee te nemen...

[ Voor 53% gewijzigd door Reveller op 28-12-2005 21:15 ]

[Zoefff]

Dat is jammer. Want met onderstaand stukje javascript zou het in combinatie met mijn vorige post wel werken.

Java:

    var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++) {
        var links_single = links[i];
        if(links_single.getAttribute("rel") == "external") {
            links_single.style.color = "#FF0000";
        }
    }

Zie voor een voorbeeldje http://zoefff.gotdns.com/got/atribute_selectors.html

[disjfa]

Je kan er ook gewoon een regex op loslaten die voor de meneer bekijkt of de link begint met http:// hoor. Een extra element is dan helemaal niet nodig. En is het toch alsnog opgelost.

[Verwijderd]

Reveller schreef op woensdag 28 december 2005 @ 21:09:
[...]

Dat is dus niet mogelijk Ik kan alleen zaken veranderen nadat de pagina gerendered is, door bv. mbv. javascript de DOM aan te passen.

Ik gebruik nu overigens het volgende scriptje:

JavaScript:

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
  if ((links[i].attributes['href'].value).indexOf('http://')) {
    document.links[i].setAttribute('class', 'external');
  }
}

Het is alleen bizar dat juist de links die niet beginnen met "http://", als class 'external' meekrijgen?

Ik ga dit scriptje eerst eens goed testen overigens. Er zullen ook wel wat regexpen bij komen kijken, om bv. een interne link naar een subdomein, niet mee te nemen...

Als http:// als eerste staat, dan staat hij dus op positie nummer 0.
En aangezien 0 ook als false gezien kan worden, wordt de code achter if niet wordt uitgevoerd.

Daarom kan je beter zoiets gebruiken:

code:

if (links[i].attributes['href'].value).indexOf('http://') != -1)

[crisp]

Reveller schreef op woensdag 28 december 2005 @ 19:46:
is er een cross-browser pure css oplossing hiervoor?

nee

is er bekend wanneer IE css3 selectors gaat ondersteunen?

nee, in ieder geval nog niet in IE7 voor zover bekend

zou dit probleem anders met javascript op te lossen zijn

ja, maar een simpele expression kan hier ook wonderen verrichten:

HTML:

<!--[if IE]>
<style type="text/css">

a {
  color: expression((new RegExp('^http://')).test(this.getAttribute('href')) ? 'lime' : 'inherit');
}

</style>
<![endif]-->

[Reveller]

crisp schreef op woensdag 28 december 2005 @ 23:26:

HTML:

<!--[if IE]>
<style type="text/css">
a {
  color: expression((new RegExp('^http://')).test(this.getAttribute('href')) ? 'lime' : 'inherit');
}
</style>
<![endif]-->

Maar dat is dan alleen een oplossing voor IE. Voor FF heb je dan nog steeds een andere oplossing nodig. Ik denk dat het dan duidelijker is om een generieke javascript oplossing te maken?

Het volgende javascriptje werkt trouwens perfect in FF, maar in IE wordt de class niet gezet. Toch zit er volgens mij geen fout in:

Java:

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
  if ((links[i].attributes['href'].value).indexOf('http://') != -1) {
    document.links[i].setAttribute('class', 'external');
    alert(links[i].attributes['class'].value); /* leeg in IE */
  }
}

[ Voor 48% gewijzigd door Reveller op 29-12-2005 16:32 ]

[djluc]

Dit misschien?

Java:

var links = document.getElementsByTagName('a');
var i=links.length;
while(i--) {
  if ((links[i].attributes['href'].value).indexOf('http://') != -1) {
    if(typeof links[i].className=='undefined') {
      links[i].className='external';
    }else{
      links[i].className+=' external';
    }
  }
}

[ Voor 36% gewijzigd door djluc op 29-12-2005 16:44 ]

[crisp]

Het nadeel van dergelijke JS-oplossingen is nog altijd dat het pas achteraf wordt toegepast en niet werkt in browsers die niet JS-enabled zijn.

Het probleem met setAttribute en class is overigens dat IE het enkel op deze manier doet (wat weer niet werkt in standard-compliant browsers):

JavaScript:

links[i].setAttribute('className', 'external');

(ja, zelfs de DOM-implementatie van IE rammelt aan alle kanten ) derhalve is de manier die djluc laat zien de eenvoudigste om het crossbrowser te laten werken.
Zelf gebruik ik overigens mijn eigen methods om makkelijk met classes te werken: http://therealcrisp.xs4all.nl/meuk/classdealer.js

[ Voor 20% gewijzigd door crisp op 29-12-2005 16:57 ]

[Reveller]

@djluc - dat werkt perfect, en is nog beter ook voor als de link al een class toegewezen heeft gekregen Toch snap ik nog steeds niet waarom setAttribute niet werkte...ik dacht iets gevonden te hebben op quirksmode, maar dit bleek over net iets anders te gaan. Als iemand het antwoord weet hoor ik dat graag nog.

Nogmaals bedankt voor je oplossing!

[EDIT]

@Crisp - dan klopte dat artikel in quirksmode toch Toch best vervelend, die incompatibiliteit. Dank voor je classdealer; die gaat vast nog vaak van pas komen!

[ Voor 16% gewijzigd door Reveller op 29-12-2005 17:07 ]