Proprietà css senza prefisso con -Prefix-free (update)

Prefix su prefix Stanco di utilizzare i vendor prefix per rendere compatibili le proprietà css3? -Prefix-free è la soluzione. Questo […]
Proprietà css senza prefisso con -Prefix-free (update)

Prefix su prefix

Stanco di utilizzare i vendor prefix per rendere compatibili le proprietà css3? -Prefix-free è la soluzione. Questo plug-in, realizzato in javascript da Lea Verou, lavora in background aggiungendo il prefisso del browser corrente a qualsiasi proprietà css3.

Chi lo interpreta?

I browser compatibili sono: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ e Chrome per quanto riguarda i desktop, Safari Mobile, browser di Android, Chrome e Opera Mobile per quanto riguarda gli smartphone.

Come si usa

Prefix-free è facilissimo da usare, basta inserire prefixfree.js all’interno della pagina. Si consiglia di metterlo dopo gli stili css in modo da ridurre al minimo l’effetto FOUC iniziale (Flash dei contenuti senza stile).

<link href="prefix.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="prefixfree.js"></script>

Alcune limitazioni

Che Prefix-free sia un ottima soluzione per risparmiare codice e tempo nessuno lo mette in dubbio, ma il plugin purtroppo ha un pò di restrizioni:

  • non funziona sugli stili importati tramite @import
  • se si utilizza la proprietà senza prefisso dopo una con il prefisso, questa viene sovrascritta.
    Si può rimediare con una classe oppure invertire semplicemente l’ordine delle proprietà. Quest’ultima soluzione però è un pò contro futuro.
  • Non funziona in locale su Chrome ed Opera. Pare sia risolvibile apportando delle modifiche alle opzioni dei browser.
  • Non funzionano gli stili inline su IE e Firefox < 3.6

Update – nuova funzionalità

Circa due settimane fa è stata implementata una nuova funzionalità al codice. Se si desidera utilizzare una proprietà solo con la versione prefisso evitando così di scriverla per ogni browser si può semplicemente inserire -*- come segnaposto del prefisso, questo sarà sostituito in runtime con il prefisso del browser. Ad esempio:

background: -*-linear-gradient(top, white, black);

Commenta e condividi!

Spero che l’articolo sia stato di tuo gradimento. Per qualsiasi dubbio o segnalazione scrivi pure nei commenti o sulla nostra fanpage. Alla prossima 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github