Ce sunt prefixele de furnizor?

Acești sunt prefixe non-standard pe care dezvoltatorii de browsere le folosesc pentru a adăuga suport pentru proprietăți CSS noi sau experimentale înainte ca acestea să fie aprobate oficial și incluse în standarde. Permite introducerea treptată a noilor funcționalități în web, dar necesită o abordare atentă.

Prefixe principale:

• -webkit-: Chrome, Safari, Opera (unele versiuni), majoritatea browserelor mobile (inclusiv Android și iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (unele versiuni).
• -o-: Opera (versiuni vechi).

Atunci când folosiți prefixe de furnizor, este important să respectați ordinea de scriere: mai întâi prefixele, apoi proprietatea standard. Acest lucru asigură că, atunci când browserele vor începe să suporte proprietatea standard, aceasta o va suprascrie pe prefix.

.element {
  -webkit-border-radius: 10px; /* Versiuni Safari 5 și mai vechi */
  -moz-border-radius: 10px; /* Versiuni Firefox 4 și mai vechi */
  border-radius: 10px; /* Proprietate standard */
}

În prezent, utilizarea prefixelor de furnizor a scăzut semnificativ datorită adoptării mai active a noilor proprietăți CSS de către toate browserele. Totuși, pot fi necesare pentru suportul versiunilor mai vechi de browsere sau atunci când se lucrează cu API-uri experimentale.

Pentru automatizarea gestionării prefixelor de furnizor, se folosește adesea PostCSS cu pluginul Autoprefixer.

// Exemplu de configurare PostCSS cu Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versiuni', '> 1%'] // Configurarea browserelor suportate
    })
  ]
};

Autoprefixer analizează CSS-ul și adaugă prefixele necesare pe baza setărilor de compatibilitate cu browserele. Acest lucru simplifică dezvoltarea și reduce probabilitatea de erori legate de adăugarea și gestionarea manuală a prefixelor.