Twitter fornisce molti dei suoi bottoni anche sotto forma di elementi iframe. Il problema di questi elementi è che alcuni attributi usati da Twitter non sono validi e non supereranno la validazione del W3C. Perchè si usano questi attributi? Il motivo è semplice: servono ad uniformare il rendering dei bottoni in modo cross-browser. Tuttavia, se si prescinde da Internet Explorer, esiste anche una soluzione CSS. Vediamo quale.
Un bottone di Twitter sotto forma di iframe generalmente presenterebbe un bordo in rilievo. Per questo motivo si utilizza l'attributo frameborder.
Inoltre la larghezza e l'altezza del blocco contenitore dell'elemento sono di gran lunga superiori alla porzione di contenuto visibile. In altre parole, anche se il bottone appare di dimensioni contenute, lo spazio che in realtà occupa influirà sul resto del layout della pagina.
La soluzione consiste nell'usare stili inline per garantire il massimo della specificità possibile. Ecco un esempio con il bottone Follow:
<iframe style="border: none; width: 230px; height: 30px;" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=gabromanato&show_count=true">
</iframe>
Abbiamo eliminato il bordo in rilievo dell'elemento e fissato le sue dimensioni. Il problema della soluzione CSS è che presenta dei problemi in Internet Explorer, in special modo nelle versioni 8 e inferiori.
In altre parole, la soluzione presentata potrebbe non essere sufficiente ad eliminare il bordo.
Due sono le soluzioni per Internet Explorer e per passare la validazione:
- Usare il widget JavaScript di Twitter.
- Usare un linguaggio lato server per intercettare il validatore del W3C e presentare una versione dell'elemento priva degli attributi non validi.
Se utilizzate pagine statiche, vi consiglio la prima soluzione. Se invece utilizzate pagine dinamiche, la seconda soluzione si presenterebbe in questo modo usando PHP:
$ua = $_SERVER['HTTP_USER_AGENT'];
$validator = 'validator';
if(stristr($ua, $validator) !== false) {
// versione senza attributi non validi
} else {
// versione con attributi non validi
}
Questa soluzione in pratica è un workaround, non del tutto onesta ma efficace.