Prefix free è una libreria javascript che aggiunge automaticamente i prefissi alle proprietà css che lo richiedono senza che lo faccia lo sviluppatore.

Prefix free è supportata da IE 9+, Opera 10+ (anche nella versione mobile), Firefox 3.5, Safari 4+ (anche nella versione mobile), Chrome (anche nella versione mobile) e Android browser.

Le proprietà CSS più recenti sono supportare dai browser solo se precedute dal relativo prefisso di ciascun produttore (ad esempio, -moz o -webkit).

#box{
  transform : rotate(7deg); /* Standard */
  -ms-transform : rotate(5deg); /* IE <=9 */
  -webkit-transform : rotate(5deg); /* Safari e Chrome */
  -o-transform : rotate(5deg); /* Opera */
  /* Firefox non richiede il prefisso per questa proprietà */
}

Il risultato è che ciascuna proprietà CSS introdotta di recente deve essere riscritta in modo diverso per ciascun browser.

Usare Prefix free

Usare prefix free è semplicissimo:

  1. Scaricare una copia della libreria dal sito ufficiale (pesa solo 2kb)
  2. Includere la libreria nei propri documenti, subito dopo il foglio di stile in modo che possa essere modificato immediatamente.

Nel compilare il foglio di stile usare solo le proprietà standard del W3C come mostrato dall’esempio:

#box{
  transform : rotate(7deg); /* Standard */
}

Quando la pagina viene caricata, la libreria aggiungerà alla proprietà transform il prefisso necessario in base al browser che visualizza il documento.

Visualizza la demo

Prefix free presenta diversi vantaggi:

  • limita, almeno in parte, il codice css
  • rende più semplice scrivere e modificare i fogli di stile
  • estende automaticamente la compatibilità delle proprietà css ai browser meno recenti

Malgrado ci siano alcune limitazioni (consultare la homepage di Prefix free per l’elenco completo) la libreria funziona correttamente con gli stili definiti mediante un foglio di stile esterno collegato con l’elemento link o con un foglio di stile incorporato in un elemento style. Inoltre, potrebbe non funzionare localmente con alcune versioni di Opera e Chrome se si utilizza un foglio di stile collegato con un elemento link.