Cosa sono i prefissi del fornitore?

Questi sono prefissi non standard che gli sviluppatori di browser usano per aggiungere supporto a nuove o sperimentali proprietà CSS prima della loro approvazione ufficiale e inclusione negli standard. Permettono di introdurre gradualmente nuove funzionalità nel web, ma richiedono un approccio attento.

Prefissi principali:

• -webkit-: Chrome, Safari, Opera (alcune versioni), la maggior parte dei browser mobili (inclusi Android e iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (alcune versioni).
• -o-: Opera (versioni vecchie).

Quando si usano prefissi di fornitore, è importante rispettare l'ordine di scrittura: prima i prefissi, poi la proprietà standard. Questo garantisce che, quando i browser supporteranno la proprietà standard, questa sovrascriverà il prefisso.

.element {
  -webkit-border-radius: 10px; /* Safari versioni 5 e precedenti */
  -moz-border-radius: 10px; /* Firefox versioni 4 e precedenti */
  border-radius: 10px; /* Proprietà standard */
}

Attualmente, l'uso di prefissi di fornitore è notevolmente diminuito grazie a una più attiva adozione di nuove proprietà CSS da parte di tutti i browser. Tuttavia, possono essere necessari per supportare versioni vecchie di browser o quando si lavora con API sperimentali.

Per automatizzare la gestione dei prefissi di fornitore, si utilizza spesso PostCSS con il plugin Autoprefixer.

// Esempio di configurazione di PostCSS con Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Configurazione dei browser supportati
    })
  ]
};

Autoprefixer analizza il CSS e aggiunge i prefissi necessari in base alle impostazioni di compatibilità con i browser. Questo semplifica lo sviluppo e riduce la probabilità di errori legati all'aggiunta e alla gestione manuale dei prefissi.