Firefox/Chrome : Forcer l’état d’un élément

Les navigateurs modernes possèdent aujourd’hui des outils pour développeurs très puissant que ça soit pour le HTML, CSS, JavaScript, profiling, … En CSS, la possibilité d’éditer les styles en « live » est très pratique mais peut s’avérer complexe dans certains cas comme la gestion des états (hover, focus, …). Voyons comment debugger plus facilement ce cas avec les consoles web de Chrome, Firefox et Firefug (extension pour Firefox bien connue des développeurs web). (Je n’ai pas trouver comment faire sous IE et n’utilise pas d’autres navigateurs comme Opera ou Safari …)

En effet il est possible de forcer un état sur un élément avec ces outils, ce qui est très pratique notamment pour l’état :hover (survol d’un élément).

Chrome

Il faut faire un clic droit sur l’élément dans l’inspecteur d’élément (Onglet Elements dans la barre d’outils développeur. F12 pour l’ouvrir) et choisir l’état dans le menu Force element state.

Les états gérés sont :

  • active
  • hover
  • focus
  • visited

Forcer un état sous Chrome

Firefox

Sous Firefox, cela fonctionne de la même façon que sous Chrome à la seule différence que l’état visited n’est pas disponible.

Forcer un état sous Firefox

Firebug

Avec Firebug, l’activation est un peu plus difficile à trouver. Une fois l’élément sélectionné dans l’explorateur HTML, il faut cliquer sur la flèche de l’onglet Style pour pouvoir activer l’état voulu. Firebug ne gère que les états :hover, :active et :focus comme Firefox.

Forcer un état avec Firebug

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *