Sviluppo » Internet » CSS

FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine

giovedì 21 gennaio, 2010

A volte basta spostare un elemento, cambiando punto di vista, per risolvere un problema apparentemente insuperabile. Quando poi si ha a che fare con compatibilità tra i browser e CSS, inventarsi soluzioni "spettacolari" (acrobazie direi) è all'ordine del giorno. Quello che vi mostro è un modo semplice per applicare bordi arrotondati a delle immagini utilizzando -moz-border-radius, disponibile per Mozilla FireFox e -webkit-border-radius, per Safari e Google Chrome.
Normalmente questi attributi CSS vengono applicati a container come il div:

PLAIN TEXT
CSS:
  1. div#box {
  2.     width:100px;
  3.     height:100px;
  4.     -moz-border-radius:16px;
  5.     -webkit-border-radius:16px;
  6.     background: #eee;
  7.     border: 1px solid #666;
  8. }

Con codice HTML del tipo:

PLAIN TEXT
HTML:
  1. <div id="box"></div>

Ottenendo:

Volendo fare la stessa cosa su un'immagine, ci si accorge che il risultato è parzialmente raggiunto! Utilizzando un CSS di questo tipo:

PLAIN TEXT
CSS:
  1. img#round-border {
  2.     -moz-border-radius:8px;
  3.     -webkit-border-radius:8px;
  4.     background: #eee;
  5.     border: 1px solid #666;
  6. }

Su una formattazione HTML come questa:

PLAIN TEXT
HTML:
  1. <img id="round-border" src="images/undolog.png" alt="Round Image Test" />

Safari e Google Chrome rispondono bene:

Mentre FireFox stupisce mostrando:

Com'è possibile vedere dallo screenshot qui sopra, in FireFox 3.5.7 il bordo "arrotondato" sembra esserci ma l'immagine è rimasta squadrata!
Un semplice espediente - utile in particolari casi - permette di risolvere agevolmente il problema:

PLAIN TEXT
CSS:
  1. div#box {
  2.     -moz-border-radius:8px;
  3.     -webkit-border-radius:8px;
  4.     background: url(http://dominio.com/images/undolog.png) no-repeat;
  5.     border: 1px solid #666;
  6. }

In pratica invece di utilizzare direttamente il tag img, sfruttiamo un contenitore qualsiasi - in questo caso un div - impostando il suo sfondo con l'immagine che vogliamo visualizzare con i bordi arrotondati.
Questa soluzione ha ovviamente una serie di inconvenienti:

  1. Abbiamo perso il tag img (con il suo attributo alt), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare
  2. Dovendo definire un contenitore (nel nostro caso un div) tramite i fogli di stile, dobbiamo conoscere in partenza la sua dimensione

Come ho più volte scritto su questo blog sarebbe proprio il caso che lo "standard" CSS (2 o 3 che sia) modificasse il suo nome in "ognuno fa quello che gli pare" ...

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , , , , , , , , ,

Un commento a: “FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine”

  1. getAvatar 1.0
    21 gen, 2010 vik:

    ognuno fa quello che gli pare

    lol
    Non c'è nulla di più vero e la cosa triste è che con il CSS 3 la "separazione" sta aumentando. D'altra parte non darei tutta la colpa ai realizzatori dei browser, alcuni standard fissati da W3C sono davvero vaghi.

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL