WebDev-FR

Vous ne connaissez peut-être pas le terme de “CSS Jitter” même si vous avez probablement déjà croisé ce bug.

Ce phénomène se présente lors d’une mauvaise utilisation des styles sur les événements de type onMouseOver, par exemple lorsque vous réduisez la taille d’un élément au moment ou vous le survolez avec la souris : au moment où la souris passe au-dessus de l’objet, sa taille va réduire si bien que la souris peut potentiellement ne plus être au-dessus de l’élément donc celui-ci va reprendre sa taille initiale. Mais au moment où il reprend sa taille initiale, la souris se retrouve de nouveau au-dessus donc il va de nouveau être réduit. Bref on va assister à un effet de clignotement très désagréable.

Un exemple concret réalisé par CSS-Tricks : Jitter-Man ! Pour constater le phénomène, il suffit de vous rapprocher du bord du cadre rouge de Jitter-Man…

Quelques effets qui peuvent provoquer ce phénomène :

• l’ajout ou le retrait de gras
• les modifications sur les margin ou le padding
• les modifications sur la taille des bordures
• les modifications sur la hauteur ou la largeur
• les modifications sur la hauteur de ligne

Bref, l’essentiel est de faire attention et de placer l’événement onMouseOver sur quelque chose qui ne va pas voir ses dimensions être modifiées à cause de l’effet appliqué.

Source de l’article : CSS-Tricks.

Cet article de CSS Globe aborde un sujet très pertinent : doit-on s’efforcer d’avoir d’avoir une compatibilité totale entre tous les navigateurs (du moins les majeurs) ou bien au contraire devons-nous utiliser au maximum le potentiel des navigateurs récents tout en s’assurant que l’interface des plus anciens s’affiche correctement, même si son design est moins riche ?

L’exemple le plus parlant pour illustrer cette opposition est la mise en place de coins arrondis sur un bloc.
Pour avoir une compatibilité entre les navigateurs, il faut mettre en place une méthode parmi la multitude des solutions qui s’offrent à nous mais quelque soit la méthode appliquée, cela reste une méthode lourde et illogique à partir du moment où une notion de design (les coins arrondis) a un impact sur le markup de la page (et encore plus si les balises html nécessaires pour les coins arrondis sont générées par du JavaScript) ainsi que sur la maintenance de la page.

D’un autre côté, la méthode dégradée élégante consiste à utiliser le potentiel des CSS 3 en appliquant les coins arrondis via les propriétés border-radius ou box-shadow. Sur les navigateurs ne gérant pas ces propriétés, notre bloc reste carré donc potentiellement moins joli. Cela dit, peut-être qu’avoir un site moins joli que chez les autres incitera les utilisateurs à se tourner vers les dernières versions de leur navigateur…

Oui, oui, je vous l’accorde, les propriétés CSS 3 ont elles aussi leurs limitations pour faire des coins arrondis : ça reste des quarts de cercle de couleur unie alors qu’avec des images placées dans les angles, on a plus de potentiel mais il ne faut pas oublier qu’il existe d’autres propriétés CSS 3 nous permettant de placer plusieurs images de fond sur un bloc donc cet argument ne tient pas.

Les navigateurs évoluent mais les web designers restent bloqués sur les mêmes techniques. Ca pour maîtriser les failles d’IE6, on peut dire qu’elles sont maîtrisées mais ce nivellement par le bas a un impact sur les performances des sites et bride leur design…