bookmark bookmark
Olivs On novembre - 4 - 2013
Share/Condividi

green-gradient-wallpapers_2228_1280x1024Mi sto trovando sinceramente molto in difficoltà in quanto nonostante il W3C abbia pubblicato il codice compatibile con Internet Explorer 10, spesso e volentieri non funziona. Il motivo non mi è ancora chiaro, e al momento non ho tempo per approfondire la cosa, e spero di non doverlo fare in futuro. Comunque per generare in una menubar uno sfondo colorato con del gradiente, i CSS ci vengono incontro e ci permettono finalmente di creare bottoni, e sfondi di ogni sorta e tipo senza dover ricorrere a immagini pesanti e alla lunga complicate da incastrare nei layout.
Vi posto al momento quale codice viene richiesto dai diversi browser per ottenere un semplice gradiente che parte da un verdone in alto per arrivare a un grigio nero in basso:

background: -moz-linear-gradient(#00b258, #3d3d3d);
background: -o-linear-gradient(#00b258, #3d3d3d);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00b258), to(#3d3d3d)); /* older webkit syntax */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b258', endColorstr='#3d3d3d');

Come si può vedere le sintassi sono tutte più o meno simili, e tendono tutte o quasi ad avere gli stessi elementi, preceduti da una diversa funzione, -moz-linear-gradient e -o-linear-gradient, poi abbiamo la riga per i vecchi browser un po’ più complessa, e infine l’ultima linea è dedicata al nostro ultimo arrivato di casa Microsoft. Francamente lo trovo assurdo e incoerente, e non si tratta di essere fun di una piattaforma o di un’altra, si tratta proprio di andare contro le linee guida che oramai da quasi un decennio stanno cercando di aiutare i web-developer.

Categorie: featured, tips, webdev