Rendu différentes des bordures sur les différents navigateurs

border

Les border CSS fait partis des propriétés CSS les plus utilisés.
Généralement, on utilise le plus souvent des bordures solid, c’est-à-dire des lignes continues mais il existe aussi les bordures moins connu comme dashed, dotted (points), double (double ligne), groove, ridge, inset et outset.

Bien sur la liste n’est pas exhaustive, il y a beaucoup de ces valeurs que vous n’avez probablement jamais utilisées.

Les navigateurs ont chacun leur façon d’interpréter la propriété border, l’affichage des bordures peut donner des effets curieux.

Nous intégrateur, parfois on est obligé de coder les bordures différemment. Par exemple pour donner des effets 3D, il faudrait scinder les déclarations de bordures en CSS pour avoir un rendu plus homogène entre les navigateurs.
En pratique, on va tester les bordures sur 8 navigateurs différents, le tout sur un Windows Seven .

Voici la liste des navigateurs testés :

  • Firefox 4
  • Firefox 6
  • Chrome 15
  • Safari 5.1
  • Opera 11.50
  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 10

Le code CSS :

Bordures CSS dotted

dotted-border

La bordure prend différentes formes, tantôts des diamants, des carrés ou des cercles. Il y a beaucoup de différences mais d’après la norme w3c sur la bordure, elle doit être faite de cercles. C’est donc IE10 qui s’en rapproche le plus.

Border dashed

dashed-border

Border double

double-b

Border groove

groove-border

Border ridge

ridge-border

Border inset

inset-border

Border outset

outset-border

Comme illustré ci-dessus, les variations sont au rendez-vous, c’est à nous intégrateur de trouver les adaptations nécessaires, il faudrait travailler nos déclarations de façon efficace pour avoir un rendu homogène sur les différents navigateurs.

Répondre