Créer ses composants Touch avec HTML5 CSS3 et JavaScript – Partie 1/2

Ce billet est la première partie d’une note de blog en deux volets, proposant des solutions pour adapter des composants de formulaires à destination d’une utilisation sur un écran tactile.

Le but étant d’obtenir la même qualité de rendu et le même confort d’utilisation que l’on retrouverait dans une application native mais dans le cadre d’une WebApp (ou d’une application Windows 8 Metro HTML5).

Rappel du contexte

Le grand argument en faveur du trio HTML5, CSS3 et JavaScript est sans aucun doute la possibilité d’adresser des cibles multi-navigateurs, multi-plateformes et bien sûr multi-devices. Cela ne se fera pas toujours sans douleur car le support des navigateurs même dans leur dernières versions n’est pas encore complet et bien sûr, tous les utilisateurs ne disposent pas des dernières versions.

Cependant, dans le cadre de développement à destination de tablettes tactiles et Smartphones, la modernité des navigateurs qu’ils embarquent est inhérente à la jeunesse de ces appareils. On peut alors s’attendre à un minimum de support des spécifications HTML5 et CSS 3.

Les solution proposées dans cette note sont issues de ma réflexion et de mon travail personnel et je serais ravi de profiter de toute remarque susceptible d’y apporter des améliorations.

Level 1: les boutons

Premier niveau de difficulté dans cet article! On va donc s’attaquer aux boutons qui sont des éléments relativement faciles à styler. Dans le cas de développement à destination d’interfaces touch on passera souvent par l’usage de liens hypertextes ou même de DIV auquel on liera une action en JavaScript. Il s’agit là d’un usage détourné pouvant être mal supporté par les navigateurs gérant les handicaps visuels ou moteurs.

Le but est donc d’illustrer la possibilité de styler efficacement nos boutons, à l’aide de CSS uniquement, afin d’obtenir des rendus spécifiques en fonction du device qui les affichent, qu’il soit de type tactile ou non.

En partant d’un simple input de type button, et en ne touchant qu’à la CSS nous disposerons de trois affichages différents:

Le code HTML

Voici le code html de notre page avec la déclaration des 3 boutons avec chacun leur id et les classes qui nous permettront de modifier le style:

        <label for="valid1">Sans style:</label>
        <button id="valid1">Valider</button>

        <label for="valid2">Style et texte:</label>
        <button id="valid2" class="touch-button with-text">Valider</button>

        <label for="valid3">Style sans texte:</label>
        <button id="valid3" class="touch-button without-text">Valider</button>

Sans aucun style, on obtient 3 boutons standards:

Le style CSS

Tout d’abords nous allons utiliser la classe touch-button, commune aux deux bouton touch pour définir leur style commun:

.touch-button {
   /* Taille du bouton */
    width: 100px;
    height: 100px;
    /* Image du bouton, centrée en haut à gauche */
    background-image: url('images/validerBtn.png');
   background-repeat: no-repeat;
    background-position: top center;
    /* Adaptation de la taille de l'image à notre bouton */
    background-size: 100px;
    /* On cache les styles du bouton */
   border: 0;
    background-color: transparent; 
}

Avec en plus une background de couleur noire sur ma page (pour faire ressortir le bouton blanc) on obtient ce résultat:

Ca ressemble déjà à quelque chose mais il reste des choses à faire sur le texte. Dans ce cas nous allons utiliser les classes with-text et without-text pour définir les 2 comportements:

.with-text {
    /* Hauteur avec texte = Hauteur de l'image + Hauteur du texte */
   height: 140px;
   /* Place le texte sous l'image du bouton*/
   padding-top: 110px;
   /* Taille et couleur du texte */
    font-size: 1.3em;        
    color: white;
}

.without-text {
   /* Hauteur sans texte = Hauteur de l'image */
    height: 100px;
   /* On cache le texte */
   font-size: 0;
}

On obtient alors le résultat attendu:

Il ne reste plus qu’à ajouter une petite animation sur pour simuler “l’enfoncement” du bouton quand l’utilisateur clique dessus, pour signifier que son action a bien été prise en compte.

Pour cela il est encore possible de se passer de JavaScript en utilisant le sélecteur CSS :active. Le bouton passe à l’état active à la levée de l’évènement click et les styles définis avec ce sélecteur seront pris en charge tout le temps ou le clic sera maintenu.

.touch-button:active {
    /* rétrécissement du bouton sur le clic */
    background-size: 90px;
   background-position: center 5px ;
}

le sélecteur :active fonctionne également très bien avec les écrans tactiles. On pourra ajouter une légère animation à l’aide de transitions CSS3.

Le résultat final est disponible ICI.

Level 2: Les select

Rajoutons un peu de difficulté… Toujours en partant sur une idée d’intégrer un design orienté tactile, on va tenter d’intégrer au mieux nos listes déroulantes à notre design pour tablettes et Smartphones.

Avez-vous déjà essayé de personnaliser le style d’affichage des liste déroulantes (élément SELECT en HTML)? C’est loin d’être aussi facile que pour les boutons…

Le problème auquel je me suis heurté, est que l’élément SELECT en lui-même est très peu personnalisable. Au mieux on arrive à enlever la bordure, changer la couler de fond et la police de caractère.

En partant du principe que le résultat à atteindre ressemble à ceci :

Voici ce que j’ai pu obtenir de mieux en manipulant les propriétés CSS de l’élément SELECT :

Vraiment pas terrible n’est-ce pas?

Il faut se rendre à l’évidence, les propriétés CSS que l’on peut modifier pour l’élément SELECT nous limitent beaucoup trop! Il va falloir ruser!

Obtenir un résultat visuel satisfaisant

La solution que je propose consiste à utiliser un élément DIV, bien plus facile à styler et qui va venir se placer par-dessus mon SELECT.

Le code HTML

<div class="select">

  <div id="label">Choisir une option</div>

  <select id="idSelect">

    <option value="">Choisir une Option</option>

    <option value="Option1">Première Option</option>

    <option value="Option2">Deuxième Option</option>

    <option value="Option3">Troisième Option</option>

  </select>

</div>

Sont présent:

• la SELECT
• le DIV « label », qui viendra se placer au-dessus pour prendre le relais de la SELECT pour l’affichage
• un DIV principal pour englober le tout, avec la classe « select » qui va faciliter la définition des styles CSS

Le style CSS

div.select{

/* taille du conteneur */

position:relative;

width:260px;

height:37px;

}

#sessionLabel{

/* placement */

position: relative;

z-index:0;

/* affichage */

color:#505050;

font-size:18px;

font-style:italic;

height:35px;

line-height:35px;

border:none;

background-color:#fff;

padding-left:5px;

padding-right:40px;

background:url(select.gif) right center no-repeat #fff;

}

div.select select{

/* taille */

width:100%;

height:100%;

/* placement */

position:absolute;

top:0;

left:0;

z-index:1;

opacity: 0;

}

Dans ce style CSS, 3 choses sont primordiales:

• Le positionnement de l’élément SELECT (position : absolute ; top : 0 ; left : 0 ;) qui va le placer tout en haut à gauche de son conteneur, c’est-à-dire superposé avec notre DIV.
• La valeur de z-index qui va permettre de définir quel élément sera affiché au-dessus de l’autre : l’élément qui a le plus élevé sera affiché par-dessus.
• La valeur d’opacity à 0 pour la SELECT: Cela permet de rendre la SELECT transparente et donc invisible mais tout de même cliquable! En la plaçant par dessus notre DIV, l’utilisateurs verra la DIV mais cliquera sur la SELECT.

Le reste nous permet d’obtenir le visuel souhaité et je vous invite à le personnaliser en fonction de vos besoins.

On a maintenant quelque chose de joli et correspondant au rendu que l’on souhaitais…

Il ne nous reste plus qu’a mettre à jour le texte de notre DIV en fonction de l’option choisie.

Pour cela un peu de JavaScript fera parfaitement l’affaire. Dans mon exemple, j’utilise la librairie JQuery qui est la plus utilisée à l'heure actuelle et permet de simplifier grandement l’écriture de JavaScript. Il est cependant possible de réaliser la même chose sans utiliser JQuery.

Après avoir inclus une référence à la bibliothèque JQuery dans votre pages il vous suffit alors de rajouter les quelques lignes suivantes :

<script type="text/javascript">

$("#idSelect").change(function () {

      $('#label').text($("select[id=idSelect] option:selected").text());

});

</script>

Dans ce petit code JavaScript, on abonne une fonction à l’évènement onChange de notre SELECT. Celle-ci va mettre à jour le texte du DIV « label » avec la nouvelle valeur sélectionnée.

Nous voilà maintenant avec une belle liste déroulante personnalisable à l’extrême et utilisable aussi bien sur desktop que tablettes et Smartphones!

Le résultat final est disponible ICI.

Fin de la première partie

Ceci met fin à la première des deux parties de cette note. Dans la seconde partie nous allons pousser encore plus loin en récréant intégralement un slider tactile afin d’en améliorer le support.