verosimile.it

Esperimenti CSS

Multiple links reload: nuova e migliore soluzione per gestire con i soli css un box a scomparsa con link multipli

Una veloce soluzione in puro css2 (e una spolveratina di css3) da utilizzare quando un concetto deve portare a più link.

Tempo fa avevo proposto una soluzione per i link multipli senza far uso di javascript (tranne un banale window.open), utilizzando solo i CSS. Tale soluzione, come avevo scritto nel post, non mi aveva convinto del tutto poiché, per mantenere la piena compatibilità con Internet Explorer 6, ero stato costretto ad usare un codice ridondante e non del tutto accessibile. Questo per il semplice motivo che la pseudo classe :hover (che permette la comparsa/scomparsa del box), con il browser sopra indicato funziona solo applicata al tag a.

Ora che IE6 è diventato un browser marginale, penso che i tempi siano maturi per una soluzione più efficiente e semplice, anche questa senza immagini, che offra un’alternativa funzionale agli utenti di questo browser, senza rovinare il layout della pagina. Quindi grande guadagno in termini di accessibilità e pulizia del codice e resa alternativa gradevole per le versioni di Internet Explorer precedenti la 7.
Inoltre, per rendere più gradevole il tutto sui client web avanzati, approfitteremo di quanto ci offrono i CSS3.

Prima di vedere come funziona questa nuova versione dei multiple links, un piccolo ripasso su cosa sono i multiple links (da adesso ml).
In breve, se per approfondire un concetto voglio abbinargli più di un link, attualmente posso fare solo così:

Con i ml è invece possibile una gestione più elegante e trasparente dei link molteplici:

Vediamo ora come creare i ml.
L'HTML è questo:

<span class="multiple-links">
  <span class="nodelink">tante cose di cui vergognarsi</span>
  <em>
      <span class="endash-open">&mdash;</span>
      <span class="a1"><a href="#">la classe politica</a>,</span>
      <span class="a2"><a href="#">la mafia</a>,</span>
      <span class="a3"><a href="#">il festival di San Remo</a>,</span> 
      <span class="a4"><a href="#">la corruzione</a></span>
      <span class="endash-close">&mdash;</span>
  </em>
</span>

Quindi, prima di mettere le mani nel CSS, avremo i ml annegati nel paragrafo (o altro) dove sono inseriti:

Veniamo ora ai CSS.
Questi i selettori per il contenitore di tutti i ml e per il “finto collegamento” che fa comparire il box con i link multipli:

/* contenitore dei multiple links */
.multiple-links {
  position:relative;
  z-index:100;
  white-space:nowrap;
}

/* simula lo stile di un link */
.multiple-links .nodelink {
  text-decoration:underline;
  cursor: pointer;
}

.multiple-links .nodelink:hover {
  margin-bottom:1px; /* necessario per Opera */
}

Passiamo ora al box che contiene i link multipli (e che compare sull’hover dell’elemento nodelink):

/* box che contiene i link che compaiono sull'hover*/
.multiple-links em {  
  position:absolute;
  left:0;
  top:100%;
  visibility:hidden;
  display:block;
  z-index:10;
  min-width:150px;
  max-width:480px;
  padding:12px 12px 22px 0;
  text-align:right;
  font-size:1px;
  border:1px solid #d3d3d3; /* bordi dx e sx (modificare se necessario) */
  border-top-color:#fcfcfc; /* bordo sup (modificare se necessario) */
  border-bottom-color:#8d8d8d; /* bordo inf (modificare se necessario) */
  background-image: -webkit-gradient(linear, 0% 78%, 0% 99%, 
  from(#f0f0f0), to(#e1e1e1)); /* sfumatura del box (per Safari e Chrome) */
  -webkit-border-bottom-right-radius: 8px; /* angolo arrotondato inf dx 
  per Safari e Chrome */
  -webkit-border-bottom-left-radius: 8px; /* angolo arrotondato inf sx 
  per Safari e Chrome */
  -moz-border-radius-bottomright: 8px; /* angolo arrotondato inf dx per FF */
  -moz-border-radius-bottomleft: 8px; /* angolo arrotondato inf sx per FF */
  box-shadow: #ababab 0px 5px 10px; /* ombra box per browser che lo supportano
  senza prefisso proprietario */
 -webkit-box-shadow: #ababab 0px 5px 10px; /* ombra box per Safari e Chrome */
  -moz-box-shadow: #ababab 0px 5px 10px; /* ombra box per FF 3.5 + */
}

/* gestisce l'hover del box */
.multiple-links:hover em {
  visibility:visible;
}

/* colore di sfondo del box e dei link interni 
(dev'essere uguale per i due elementi, modificare se necessario) */
.multiple-links em,
.multiple-links em a { 
  background-color:#f0f0f0; 
}

Ecco quindi cosa il browser visualizza fino a questo punto (le lineette in realtà sono testo portato a 1px). Lo screenshot è preso con Firefox 3.5, per che gestisce alcune proprietà CSS3 come i bordi arrotondati e l’ombreggiatura, ma non il gradiente, al momento prerogativa di Chrome/Safari:

Occupiamoci ora dei CSS che gestiscono l’”albero” con i vari link. In questa versione ne ho previsti un massimo di quattro (ovviamente se ne possono inserire anche meno), ma chi ha un po di dimestichezza con i fogli di stile può divertirsi ad aggiungerne altri.

/* trattino che apre l'inciso e che gestisce 
anche la prima parte (superiore) del tronco dell'albero */
.multiple-links em .endash-open { 
  position:absolute;
  left:10px;
  top:4px;
  border-left: 2px solid;
  width:6px;
  height:8px;

  padding-left:455px;
  overflow:hidden;
}

/* trattino che chiude l'inciso */
.multiple-links em .endash-close {
  display:none;
}

/* gestisce i quattro span che contengono i link dell'albero */
.multiple-links em .a1, 
.multiple-links em .a2, 
.multiple-links em .a3, 
.multiple-links em .a4 { 
  display:block;
  padding-top:4px;
  margin-left:10px;
  line-height:12px;
}

/* gestisce i quattro link dell'albero */
.multiple-links em a { 
  position:relative;
  min-height:22px;
  margin-left:12px;
  right:-8px;
  padding:0 2px;
  white-space:normal;
  font-size:11px;
}

/* gestisce parte del tronco e il primo ramo dell'albero */
.multiple-links em .a1 { 
  border-left: 2px solid;
  border-top: 2px solid;
}

/* gestisce il secondo ramo dell'albero */
.multiple-links em .a2 { 
  border-top: 2px solid;
}

.multiple-links em .a1 a,
.multiple-links em .a2 a {
  top:-14px;
}

/* gestisce parte del tronco e il terzo ramo dell'albero */
.multiple-links em .a3 { 
  border-left: 2px solid;
  border-bottom: 2px solid;
  margin-top:-20px;
  line-height:14px;
}

/* gestisce parte del tronco e il quarto ramo dell'albero */
.multiple-links em .a4 { 
  border-left: 2px solid;
  border-bottom: 2px solid;
}

.multiple-links em .a3 a, .multiple-links em .a4 a {
  top:8px;
}

/* gestisce il colore dell'albero (modificare se necessario) */
.multiple-links em .endash-open, 
.multiple-links em .a1, 
.multiple-links em .a2, 
.multiple-links em .a3, 
.multiple-links em .a4 {
  border-color:#bebebe;
}

Bene, i ml sono creati.
Non ci rimane da gestire che ultima cosa. Nel caso che i multiple links siano più di uno, e il box con i link, aprendosi, si sovrapponga a un altro ml, dobbiamo fare in modo che non accada questo:

È una questione di z-index. Dobbiamo abbinare al secondo ml uno z-index minore del primo, per evitare che rimanga sempre in primo piano. Creiamo quindi questo selettore:

.m2 {
  z-index:99; 
}

...Che abbiniamo al secondo ml con una seconda classe: <span class="multiple-links m2">. Questo porta in primo piano il ml superiore.

...E Internet Explorer 6?

IE6, senza nessun intervento sui CSS che abbiamo visto, ci presenterà i ml così:

Quindi, semplicemente, non ci fa vedere il box con i link multipli.
Possiamo porre rimedio creando delle semplici regole CSS ad hoc, da caricare con i commenti condizionali in un foglio di stile apposito per IE6 (foglio di stile dedicato che, bene o male, tutti i siti hanno la necessità di avere). I selettori che rendono accessibili i link al vecchio browser sono questi (inseriti in un file che si chiamerà, ad esempio, ie6.css e che sarà, lo ricordo, caricato da IE6 o inferiore con i commenti condizionali):

.multiple-links * {
  background-color: transparent!important;
  border: 0!important;
  white-space: normal!important;
  display: inline!important;
  text-align: left!important;
  font-size: 100%!important;
  position: static!important;
  visibility: visible!important;
  padding: 0!important;
  margin: 0!important;
  display: inline!important;
}

.multiple-links em, 
.multiple-links .nodelink, 
.multiple-links em .endash-open, 
.multiple-links em .endash-close,
.multiple-links em .a1, 
.multiple-links em .a2, 
.multiple-links em .a3, 
.multiple-links em .a4 {
  color: #333!important; /* o il colore di default del testo della pagina */
}

.multiple-links .nodelink {
  text-decoration: none!important;
  cursor: text!important;
  font-weight: normal!important;
}

.multiple-links em 
.endash-open, 
.multiple-links em 
.endash-close {
  margin:0 6px!important;
}

Questo ci permette di avere i link visibili come testo comune sui browser della Microsoft precedenti la versione 7.

...E la differenza di resa tra i browser che supportano i CSS3 e gli altri?

Safari e Chrome, in virtù del pieno supporto delle specifiche CSS3 avranno la resa grafica più appagante, seguiti da Firefox (che dalla versione 3.5 supporta anche le proprietà box-shadow) e da Internet Explorer 7 e 8 e Opera. Ovviamente in futuro saranno sempre più i browser che supporteranno i CSS3.

...E la demo dei Multiple Links?

Come da tradizione, a fine tutorial, eccovi l’esempio funzionante dei multiple links.