Prise en charge CSS3 dans les navigateurs : tableau des préfixes

# Prise en charge des fonctionnalités CSS3 dans les navigateurs modernes : Tableau de compatibilité

Les propriétés CSS3 sont implémentées partiellement dans les versions actuelles des navigateurs, même sans normalisation complète W3C. Les développeurs doivent tenir compte des préfixes vendeurs et des versions minimales pour assurer la compatibilité inter-navigateurs. Le tableau ci-dessous détaille l'état des principales propriétés, y compris les exigences de préfixes (-ms-, -moz-, -webkit-, -o-) et les versions des navigateurs. Cela vous aide à planifier l'utilisation des fonctionnalités dans vos projets avec précision.

Légende du tableau :

• Les icônes indiquent le support dans IE, Firefox, Chrome, Safari, Opera.
• Les chiffres montrent la version minimale du navigateur.
• Les variantes préfixées sont notées séparément.

(Insérez ici l'image du tableau de référence rapide pour la prise en charge CSS3.)

Détails de la prise en charge par navigateur

Internet Explorer prend en charge les fonctionnalités avec le préfixe -ms- à partir de la version 9+, comme border-radius et box-shadow. Firefox utilisait -moz- jusqu'à la version 16, après quoi de nombreuses propriétés sont passées aux noms standards. Chrome et Safari s'appuient sur -webkit-, supporté dès les versions 4–5, en abandonnant progressivement les préfixes pour les spécifications finales.

Opera utilise -o- (et rarement -xv-) à partir de la version 10.5. Le tableau complet couvre des propriétés comme :

• Animations et transformations : transition, animation, transform.
• Bordures et ombres : border-radius, box-shadow.
• Arrière-plans et dégradés : background-clip, linear-gradient.
• Polices et texte : @font-face, text-shadow.
• Mises en page : flexbox (display: flex), multi-column.

| Propriété | IE (version) | Firefox (version) | Chrome (version) | Safari (version) | Opera (version) |

|-----------------|--------------|-------------------|------------------|------------------|-----------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-) | 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

Ce tableau est basé sur des données de 2012, mais les principes des préfixes restent pertinents pour les projets legacy.

Travailler avec les préfixes vendeurs

• Automatisation : Utilisez Autoprefixer dans les outils de build (Webpack, Gulp) pour ajouter les préfixes en fonction des données de Can I Use.
• Polyfills : Pour un support faible, utilisez des bibliothèques JS comme Modernizr pour la détection et les solutions de repli.
• Post-traitement : Des outils comme PostCSS génèrent dynamiquement les préfixes vendeurs.
• Tests : Vérifiez dans les émulateurs et sur de vrais appareils, en vous concentrant sur Safari/Chrome mobile.
• Dégradation élégante : Assurez un rendu de base sans CSS3 pour les anciens IE.

Exemple de code avec préfixes pour les transformations :

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Mises à jour et ressources

Le support a évolué : aujourd'hui, la plupart des propriétés fonctionnent sans préfixes dans Chrome 111+, Firefox 115+, Safari 17+. Consultez les bases de données de compatibilité pour les dernières infos. Le tableau est idéal pour auditer du vieux code ou migrer vers les standards modernes.

Points clés à retenir

• Préfixes essentiels pour le legacy : -webkit- couvre 80 % des navigateurs mobiles pré-2020.
• Versions minimales : Chrome 4+, Firefox 4+, IE 9+ atteignent 95 % des utilisateurs à la publication.
• Automatisation simplifie : Autoprefixer élimine le travail manuel.
• Tests critiques : Différences de rendu dans les ombres et dégradés selon les moteurs.
• Avenir sans préfixes : La normalisation W3C accélère l'abandon des extensions vendeuses.

— Editorial Team