Qu'est-ce que les préfixes de fournisseur?

Ce sont des préfixes non standard que les développeurs de navigateurs utilisent pour ajouter la prise en charge de nouvelles propriétés CSS ou expérimentales avant leur approbation officielle et leur inclusion dans les normes. Ils permettent d'introduire progressivement de nouvelles fonctionnalités sur le web, mais nécessitent une approche prudente.

Principaux préfixes :

• -webkit- : Chrome, Safari, Opera (certaines versions), la majorité des navigateurs mobiles (y compris Android et iOS).
• -moz- : Firefox.
• -ms- : Internet Explorer, Edge (certaines versions).
• -o- : Opera (anciennes versions).

Lors de l'utilisation de préfixes de fournisseur, il est important de respecter l'ordre d'écriture : d'abord les préfixes, puis la propriété standard. Cela garantit que lorsque les navigateurs commenceront à supporter la propriété standard, elle écrasera le préfixe.

.element {
  -webkit-border-radius: 10px; /* Safari versions 5 et inférieures */
  -moz-border-radius: 10px; /* Firefox versions 4 et inférieures */
  border-radius: 10px; /* Propriété standard */
}

Actuellement, l'utilisation de préfixes de fournisseur a considérablement diminué grâce à une adoption plus active de nouvelles propriétés CSS par tous les navigateurs. Cependant, ils peuvent être nécessaires pour supporter d'anciennes versions de navigateurs ou lors de l'utilisation d'API expérimentales.

Pour automatiser la gestion des préfixes de fournisseur, on utilise souvent PostCSS avec le plugin Autoprefixer.

// Exemple de configuration de PostCSS avec Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Configuration des navigateurs supportés
    })
  ]
};

Autoprefixer analyse le CSS et ajoute les préfixes nécessaires en fonction des paramètres de compatibilité avec les navigateurs. Cela facilite le développement et réduit le risque d'erreurs liés à l'ajout et à la gestion manuelle des préfixes.