Top

Utilizzare I Bordi Arrotondati In Css, Anche Su Internet Explorer

Da quando il mondo è mondo (e da quando esiste l’HTML), i webmaster devono cimentarsi in una continua guerra in quella che si chiama compatibilità tra i browser, ossia cercare di rendere il più possibile identico il proprio sito sia che venga aperto con Internet Explorer sia che venga aperto con Firefox / Chrome.

Un classico esempio è quello del padding (spaziatura interna): in un rettangolo 10 x 10, se inseriamo un padding di 2 pixel avremo che su Explorer verrà visualizzato il rettangolo 10 x 10 (con 2 pixel di spaziatura interna) mentre su Firefox sarà di 12 x 12 (contrariamente a quanto dicono tutti, io trovo l’interpretazione di Firefox sbagliata).

Purtroppo è alquanto fastidioso dover perdere tempo con queste incompatibilità (dovrebbe esistere uno standard unificante anche per l’interpretazione del codice), ma non entro nel merito di questo discorso. Piuttosto voglio mostrarvi oggi un trucco molto efficiente per realizzare dei box con gli angoli dei bordi arrotondati, in stile CSS3 ma compatibile con Internet Explorer (6, 7, 8) e le ultime versioni di Firefox e Chrome. Senza usare, ovviamente, le tabelle.

Gli angoli dei box in stile CSS3, con un hack

Il metodo d’implementazione è semplicissimo. Utilizziamo la proprietà del CSS border-radius, utilizzando però un trucchetto per renderla compatibile anche con Internet Explorer, in cui non funziona. Anzitutto creiamo il nostro box in CSS ad esempio così:

#box
{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;        // Per Firefox
-webkit-border-radius: 5px;     // Per Chrome
}

Orail nostro box presenta gli angoli dei bordi arrotondati senza necessità di utilizzare gif o tabelle di nessun tipo. Manca però il supporto a Explorer: dobbiamo scaricare il file ie-css3.htc e aggiungerlo alla cartella del foglio di stile.

Si tratta di uno script che aggiunge a Explorer le proprietà necessarie per supportare gli angoli arrotondati (e anche le ombre). Ora non ci resta che aggiungere questa riga nel nostro CSS, prima della parentesi di chiusura:

behavior: url(ie-css3.htc);

..ed il gioco è fatto!

Nota bene: perché funzioni il trucco, è necessario che il file sia aperto da web e non da locale.

email
Related Posts Plugin for WordPress, Blogger...

Non perdere l'opportunità di ricevere il meglio di Ziogeek!


Commenti


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/ziogeek/public_html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273