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

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:

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

Con codice HTML del tipo:

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:

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

Su una formattazione HTML come questa:

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:

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

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” …

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

  1. 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.

    RispondiQuota

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
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA