Médiaforma

All posts tagged chrome

Plusieurs acteurs se partagent le monde des navigateurs Web :

  • Sous Windows : Internet Explorer, Google Chrome, Mozilla Firefox, Safari et Opera.
  • Sous Macintosh : Safari, Opera, Google Chrome et Mozilla Firefox.
  • Sous Linux : Google Chrome, Mozilla Firefox et Opera.

Pourquoi pas me direz-vous ! Malheureusement, tout ce petit monde n’interprète pas toutes les instructions HTML/CSS de la même manière et il arrive que le rendu diffère d’un navigateur à l’autre. Dans la mesure du possible, je vous suggère d’installer tous les navigateurs compatibles avec votre système d’exploitation et de tester votre code sur chacun d’entre eux.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


Certaines pages Web peuvent refuser de s’afficher ou s’afficher de façon erronée dans la version Bureau du navigateur Internet Explorer 11. Cela vient du fait qu’elles ne reconnaissent pas IE11 ou qu’elles interdisent l’accès à ce navigateur. Vous pouvez contourner ces limitations en faisant passer IE11 pour un autre navigateur !

Appuyez sur la touche F12, basculez sur l’onglet Emulation (1) et choisissez le mode d’émulation dans la liste déroulante Chaîne de l’agent utilisateur (2). Ici par exemple, IE11 sera pris pour Google Chrome :