Regard sur l'attribut d'espace réservé HTML5
Une de mes nouvelles pièces préférées en HTML5 est la possibilité d’ajouter Texte réservé facilement. Le texte de substitution est le texte gris que vous trouvez dans un champ de saisie utilisé pour indiquer aux utilisateurs quelle entrée est attendue dans ce champ. Une fois que les utilisateurs commencent à taper dans le contribution champ, ce texte disparaîtra.
Autrefois, nous le faisons souvent avec JavaScript, comme suit;
Il n'y a rien de mal à cette pratique, mais c'est plus facile avec HTML5.
HTML5 a introduit un nouvel attribut avec un nom logique; espace réservé. Voici un exemple:
Si nous le voyons dans les navigateurs, l’entrée devrait maintenant avoir le texte en gris, comme on le voit ci-dessous;
Quelques points à noter: selon le cahier des charges, le espace réservé attribut ne doit pas être utilisé comme alternative à un étiquette et il est également suggéré que cet attribut ne soit appliqué qu'à contribution types nécessitant du texte, par exemple. texte, mot de passe, chercher, email, zone de texte et tel.
Ajouter espace réservé au contribution les types: radio et case à cocher ne fera aucune différence.
Placeholder & CSS
De plus, il est également possible de styler le texte de substitution via CSS, mais, au moment de la rédaction de cet article, était encore limité aux navigateurs Firefox et Webkit..
L'exemple suivant montre comment modifier le texte d'espace réservé en vert dans Webkit et Firefox;
input :: - webkit-input-placeholder couleur: vert; entrée: -moz-placeholder color: green;
Juste pour se rappeler cependant, le :: - webkit-input-placeholder et : -moz-placeholder n'affectera que le texte et ne pourra pas être écrit en parallèle.
input :: - webkit-input-placeholder, entrée: -moz-placeholder color: green;
Ce morceau de code ne fonctionnera pas.
Sélecteur d'attribut
CSS3 est également venu supporter cet attribut en introduisant le [espace réservé] sélecteur d'attributs;
input [espace réservé] border: 1px solid green;
Dans l'exemple ci-dessus, nous sélectionnons tous les contribution qui a le espace réservé attribuer et changer la bordure en vert.
Compatibilité du navigateur
Sans surprise, cette nouvelle fonctionnalité HTML5 n'est pas prise en charge par les anciens navigateurs et n'est actuellement prise en charge que dans les cas suivants: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 et Internet Explorer 10 (qui n'a pas encore été officiellement publié).
Placeholder Polyfills
Néanmoins, si nous devons afficher l’espace réservé dans des navigateurs plus anciens tout en pouvant utiliser le espace réservé attribut, nous pouvons utiliser Polyfills. Il y a beaucoup de Placeholder Polyfills mais dans cet exemple, nous allons utiliser PlaceMe.js;
Le PlaceMe.js, comme vous pouvez le constater à partir de l'extrait de code ci-dessus, dépend de jQuery. Maintenant, si nous le voyons dans Internet Explorer 9, par exemple, toutes les entrées doivent maintenant afficher le texte de substitution.
- Voir la démo
- Source de téléchargement
Pensée finale
le Espace réservé HTML5 Cet attribut facilite certainement l’ajout de texte fictif. C'est maintenant à nous, développeurs et concepteurs Web, de choisir la méthode à utiliser: JavaScript ou HTML5.
Si vous considérez que l'utilisation de Polyfills et de jQuery pour prendre en charge les anciens navigateurs est redondante, alors JavaScript est apparemment plus adapté au travail. Mais si vous pouvez ignorer pacifiquement les anciens navigateurs, utiliser HTML5 Placeholder est probablement un meilleur moyen..
