MoebiusMania

Nel realizzare la nuova versione del mio sito ho voluto utilizzare una proprietà CSS un pò avanti sui tempi, (infatti la troveremo "ufficializzata" con i CSS3), ma che 2 motori di rendering web molto diffusi hanno gia deciso di utilizzare: il BORDER RADIUS. Questa proprietà , in base al valore indicato, genera degli angoli arrotondati nei bordi del tag nel quale viene applicato, permettendo al designer di ottenere questo effetto nativamente da CSS e senza dover creare immagini di sottofondo con altri programmi di grafica da applicare agli oggetti interessati, con i conseguenti vantaggi in "malleabilità" dell'effetto e di minor peso in kilobyte per chi deve visualizzare la pagina (volete mettere una riga di codice contro uno più file immagini di sfondo? :P). Come ho anticipato prima però questa proprietà fa parte dello standard CSS3 che è ancora in fase di sviluppo, tuttavia i motori di rendering Gecko (sviluppato da Mozilla) e Webkit (sviluppato da Apple) hanno introdotto delle loro proprietà CSS specifiche per ottenere questo stesso effetto:

-moz-border-radius: 15px; /* Per i browser con base Mozilla(Gecko) */
-webkit-border-radius: 15px; /* Per i browser con base Webkit */
border-radius: 15px; /* Regola generale per CSS3 */

Se utilizzate un browser con supporto per i CSS3 potete vedere un'esempio live. Attualmente l'unico problema è per chi utilizza browser che non supportano CSS3 o non hanno un motore di rendering di base Mozilla/Webkit (Attualmente sono: Internet Explorer 6 e 7, e Opera 9 - ma gia con l'alpha di Opera 10 è stato annunciato il pieno supporto di CSS3) che non vedranno i bordi arrotondati

• Browser con motore MOZILLA: Firefox , Flock , Camino (solo per MacOS), Galeon, Conkeror, Songbird (Firefox integrato), SeaMonkey.
• Browser con motore WEBKIT: Chrome (Google), Safari (Apple), Browser Web su sistemi mobili S60 (Symbian/Nokia), iCab, Midori.