Compatibilité de CSS3 sur les différents navigateurs

Avec la perpétuelle évolution des technologies Web ainsi que de nombreux modules qui sont toujours en cours d’écriture, accepter CSS3 dans sa forme globale sans prendre des mesures peut entrainer des difficultés.

Ainsi, pour éviter cela, il est nécessaire de prendre des précautions comme la mise en place de 2 solutions dont la première consiste au ciblage des navigateurs modernes uniquement et pour la deuxième les autres navigateurs ( à la traine ).

evolution du web

Les navigateurs modernes

Pour ces navigateurs, il est possible d’effectuer la création des interfaces full CSS3.
Toutefois, ces dernières ne seront pas au top au niveau de la qualité graphique puisque l’aspect sera bridé sur de nombreux navigateurs, à savoir IE la version 9 incluse. Pour s’apercevoir de ce bridage de l’aspect graphique, il faut faire le test de quelques démos créées en CSS3 et HTML5 sur quelques navigateurs. Cela permettra également de constater des éventuels problèmes de compatibilité.

et les Autres navigateurs

  • Navigateurs standards : dépendant du type de projet, mais également de la clientèle, les navigateurs standards ont assez d’importances. Par exemple, pour les gros clients, cette importance est primordiale étant donné qu’un site internet ne peut pas « crasher» après un changement de navigateur ou de matériel.
  • Navigateurs mobiles : en général, les cibles sont iOS et Android. Pour ces 2 systèmes d’exploitation, il est permis d’utiliser CSS3 en version avancée. Cependant, il faut effectuer quelques manœuvres puisque certains appareils sous Android présentent des bugs sur certains propriétés CSS3.

Solution

Pour pouvoir différencier les navigateurs, il suffit d’utiliser le plugin javascript Modernizr.

Une chose importante à savoir, c’est que Modernizr n’ajoute en rien de nouvelles fonctionnalités aux différents navigateurs. Ce qu’il fait en revanche c’est d’indiquer si oui ou non un navigateur prend en charge la fonctionnalité utilisée. Cela nous permettra d’expérimenter de nouvelles fonctionnalités avec le CSS3 et le HTML5 sans pour autant sacrifier les anciens navigateurs.

Voir notre article concernant Modernizr pour en savoir plus.

L’autre alternative c’est de s’informer sur la compatibilité des propriétés que nous allons utiliser sur le site http://caniuse.com/

Source: StatCounter Global Stats – Browser Market Share

Répondre