Box rounded corners cross browser e la proprietà CSS3 border-radius

Immagina di avere un elemento, come un titolo o un div del quale non conosci ne l’altezza e ne la […]
Box rounded corners cross browser e la proprietà CSS3 border-radius

Immagina di avere un elemento, come un titolo o un div del quale non conosci ne l’altezza e ne la larghezza in quanto le sue dimensioni variano al variare dei contenuti posti al suo interno. I CSS3 in questo caso si rivelano molto potenti, niente di più facile e veloce per associare ad un qualsiasi elemento del layout gli angoli arrotondati grazie a questa semplice dichiarazione:

#container {
    border-radius:10px;
}

I browser come renderizzano?

Come viene renderizzata questa particolare proprietà da tutti i browser sui quali di solito testiamo i nostri siti web?
Questo modus operandi può essere applicato per tutte le casistiche, il procedimento è lo stesso sia per il border-radius sia per qualsiasi altra proprietà. Per essere sicuri del risultato quindi, affidiamoci ad uno dei siti online che propongono le tabelle di compatibilità delle proprietà css. Ecco in particolare uno screen fatto online su http://caniuse.com, un ottimo sito che proprone in una grafica molto comprensibile e lineare tutte le casistiche possibili per la proprietà selezionata.

Come si evince dalla tabella, attualmente la proprietà border-radius è supportata solo da determinate versioni di browser. Chrome può ritenersi a posto, mentre firefox e safari hanno bisogno del proprio suffisso proprietario che consente di emulare la proprietà css3 in modo corretto per le versioni precedenti. Opera è parzialmente compatibile ma nel caso della versione 10.0 e 10.1 il corrispondente suffisso proprietario (-o-border-radius) non servirebbe a garantire la corretta renderizzazione della proprietà.

Miglioriamo la dichiarazione

Modifichiamo la precedente dichiarazione css in quella che segue aggiungendo anche le varianti per Firefox e Safari.

#container {
    border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Internet Explorer

Non preoccuparti non mi sono dimenticato di quella macchia rosso fuoco alla sinistra della tabella. Ho lasciato per ultimo il famigerato Internet Explorer perchè in questo caso la situazione si fa leggermente piu complessa, sia lato css sia lato markup. Partiamo dal presupposto che IE dalla versione 6 alla 8, e cioè le versioni attualmente piu utilizzate dalla maggioranza delle persone, non supportano ne la proprietà border-radius ne prevedono alcun suffisso proprietario che possa venire incontro alle nostre esigenze.

Una soluzione (old school) in html e css

L’unico metodo efficace per ottenere angoli arrotondati per un elemento del quale non conosciamo ne l’altezza e ne la larghezza senza rompere il layout è quello di implementare il seguente markup aggiuntivo all’interno del notro elemento, solo per le versioni di IE dalla 8 o inferiori. Di seguito un’esemplificazione grafica su come va suddiviso il box in fase di ritaglio. Ogni angolo va ritagliato e salvato come immagine. Le singole immagini poi verranno utilizzate come background dei quattro elementi aggiuntivi che andranno esattamente a sovrapporsi in posizione assoluta sopra i 4 spigoli del box.

I 4 elementi grafici da ritagiare sono stati evidenziati e numerati per facilitare la comprensione. Ora non rimane altro da fare che creare uno sprite con gli angoli ritagliati e rimodellare l’html e il css come segue. Come potete ben vedere i 4 elementi span sono stati inseriti all’inteno di un commento condizionale dedicato solo ad internet explorer cosi che gli altri browser non interpretino il markup aggiuntivo. Ricordiamo comunque che i 4 elementi aggiuntivi span non sono elementi semantici per cui il loro utilizzo non altera il valore semantico del documento ed è irrilevante ai fini della fruizione della pagina stessa.

<div id="container">
    <!--[if lte IE 8]>
    <span class="rounded01"></span>
    <span class="rounded02"></span>
    <span class="rounded03"></span>
    <span class="rounded04"></span>
    <![endif]-->
</div>
#container {
    /*Tutti i valori sono indicativi e variano dalle proprie esigenze grafiche*/
    border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    width:600px;
    height:100px;
    position:relative;
}
.rounded01,rounded02,rounded03,rounded04 {
    position:absolute;
    width:15px;
    height:15px;
    backgorund-image:url("rounded.jpg");
}
.rounded01 {
    top:0;
    left:0;
    background-position:0 0;
}
.rounded02 {
    top:0;
    right:0;
    background-position:30px 0;
}
.rounded03 {
    bottom:0;
    right:0;
    background-position:45px 0;
}
.rounded04 {
    bottom:0;
    left:0;
    background-position:60px 0;
}

Una soluzione in Javascript

In alternativa alla noiosa e ormai obsoleta soluzione delle immagini, ci viene incontro javascript che riesce a simulare il border-radius, per le versioni di IE che non hanno il supporto. Un’ottima soluzione può essere quella in mootools segnalata David Walsh.

Conclusioni

Ancora una volta, a 2011 inoltrato, siamo ancora qui che combattiamo con immagini, spostamenti, sprite e quant’altro, solo e unicamente per garantire compatibilità con uno dei browser piu usati al mondo, un browser ormai giunto alla release 9, un browser che continua a creare problemi non da poco a noi designers. Non è il caso di border-radius, ma considerate che la tanto attesa proprietà css3 box-shadow non è supportata dal browser in questione versione 9. I tempi di lavoro si allungano, i tempi di controllo anche. La situazione insomma non fa altro che peggiorare.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github