Border-radius per Safari e Chrome

This is an old article, from a time I thought I’d be writing this blog in Italian. Now I’ve changed my mind and everything new is supposed to be in English. Since there is nothing particularly interesting or original in these old posts, I’ll just leave them here in Italian. If you can’t read Italian, you’re not missing much.

Veloce post, per segnalare un aggiornamento di Webkit (sia Safari che Chrome) di qualche mese fa, ma che ho notato non essere stato segnalato praticamente da nessuna parte, tanto da vedere usato il vecchio metodo come esempio in un paio di libri pubblicati questo mese. In realtà la cosa è già valida da marzo per Chrome e da luglio per Safari.

Attualmente questi browser supportano la dichiarazione standard CSS3 per i bordi arrotondati, senza più bisogno di aggiungere il prefisso -webkit-. Il che significa che invece di dover usare per forza:

div {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

si può già usare:

div {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Naturalmente, se vogliamo che anche le vecchie versioni di Safari e Chrome vedano i bordi arrotondati, possiamo continuare a includere anche la versione con il prefisso, ma teniamo presente che, a differenza di Internet Explorer, per gli altri browser (soprattutto Chrome), se si parla di questioni puramente decorative come in questo caso non è richiesto il supporto “al pixel” per le versioni vecchie, visto che gli utenti li aggiornano in tempi brevi.

Infine, Firefox continua a mantenere invece il prefisso -moz- (anche nella beta della versione 4) e a utilizzare la sintassi lievemente diversa rispetto a quella standard quando si vuole cambiare un solo angolo alla volta: -moz-border-radius-topleft: 5px contro border-top-left-radius: 5px. Potete comunque usare, in caso vi vada bene, la notazione ridotta con valori diversi, per esempio:

div {
    -moz-border-radius: 5px 10px 30px 0;
    border-radius: 5px 10px 30px 0;
}

L’ordine dei valori è quello orario solito, alto-sinistra, alto-destra, basso-destra, basso-sinistra.

Aggiornamento : A differenza dalla beta, Firefox 4 supporta la sintassi ufficiale senza prefisso! Quando avrà soppiantato ragionevolmente la 3.6 si potrà abbandonare anche il -moz-. E tenendo conto che Internet Explorer 9 già supporta la versione ufficiale possiamo dire che i bordi arrotondati sono ormai una realtà ufficiale per tutti.

Leave a Reply

Required fields are marked *.