L’articolo di oggi è un piccolo consiglio sui link per avere un sito conforme alle norme w3c(1). Questa procedura è valida nel caso stiamo usando la versione “XHTML 1.0 Strict“, un po’ datata, ma sempre valida se dichiarata nel tag “HTML” del sito.

Il designer web ha diversi modi per impostare l’apertura di un dato link in una nuova pagina (o nuovo tab) del browser. Il primo ad essere implementato è stato l’inserimento dell’attributo “target='_blank'” all’interno del tag di riferimento ai link “<a>“. Questo è il modo più semplice di aprire un link in una seconda finestra, ma sfortunatamente non risponde agli standard w3c. La soluzione suggerita dal w3c è l’inserimento di questi altri attributi  “onclick='window.open(this.href); return false;'“, di fatto risolvendo il problema con qualche breve istruzione javascript.

Per nostra fortuna javascript è un linguaggio veramente vario, uno dei comportamenti che possiamo gestire è l’apertura dei link. Con questo terzo ed ultimo esempio faremo aprire in un nuovo tab tutti i link esterni, ovvero quelli che come riferimento iniziano con “http://” risparmiandoci di dover scrivere ogni volta il codice suggerito dal w3c su ogni link esterno. Il codice di riferimento è questo:

function externalLinks() {
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=anchors.length-1; i>=0; i--) {
    var anchor = anchors[i];
    if (anchor.href && anchor.href.substr(0,7) == "http://")
    anchor.target = "_blank";
    }
  }
window.onload = externalLinks;

(1)_ Il w3c è l’organizzazione no-profit che si occupa di stabilire con una certa rigidità gli standard che i webmaster e gli sviluppatori dei browser devono seguire per creare e visualizzare pagine dette “XHTML“, garantendo in questo modo la massima compatibilità tra il sito e i vari browser. Per saperne di più gli intenti dell’organizzazione sono spiegati (oltre che sul sito dell’organizzazione) alla pagina relativa su Wikipedia.

Guarda qui:  Must have amp settings: gli esempi

Non ti basta?

Aggiungere una didascalia a comparsa alle foto con i CSS3 GTranslate: un widget per la traduzione automatica Linux e font Bottoni menu di navigazione con CSS Sprites Tutorial: Dare l’effetto “gocce d’acqua”