Rôle

Le sélecteur "out-of-range" est une pseudo-classe identifiable par la syntaxe ":out-of-range". Son rôle est de cibler spécifiquement chaque élément de formulaire qui est associé à une plage de valeurs définie par les attributs "min" et "max", et dont la valeur se situe en dehors de cette plage prédéfinie.

Il convient de noter que pour instaurer une plage de valeurs sur un élément de formulaire, il est nécessaire d’utiliser les attributs HTML "min" et "max". Cette fonctionnalité s’applique notamment aux balises "input" de types variés tels que "number", "range", "date", "datetime", "datetime-local", "month", "time" et "week". Toutefois, il est essentiel de prendre en compte que cette fonctionnalité n’est prise en charge qu’à partir de la version IE-10 d’Internet Explorer et n’est pas compatible avec le navigateur Opera.

L’utilisation du sélecteur "out-of-range" revêt une importance significative dans le domaine du développement web, car elle permet d’appliquer des styles spécifiques aux éléments de formulaire dont la valeur fournie par l’utilisateur se trouve en dehors de la plage définie. Cette pseudo-classe offre une méthode efficace pour signaler visuellement aux utilisateurs que la valeur qu’ils ont saisie ne correspond pas aux attentes, tout en maintenant une expérience utilisateur cohérente et informative.

L’une des façons de mettre en œuvre cette fonctionnalité est d’utiliser du code HTML et CSS. Voici un exemple pratique illustrant la création d’un formulaire avec un champ "input" de type "number" et l’application du sélecteur "out-of-range" pour styliser les valeurs en dehors de la plage acceptable :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="number"]:out-of-range {
border-color: red;
background-color: #ffcccc;
}
</style>
<title>Exemple de Sélecteur :out-of-range</title>
</head>
<body>
<h2>Exemple de Sélecteur :out-of-range</h2>
<form>
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="65">
<input type="submit" value="Envoyer">
</form>
</body>
</html>

Dans cet exemple, le champ "input" de type "number" est destiné à recueillir l’âge d’un utilisateur. Les attributs "min" et "max" définissent la plage de valeurs acceptables, c’est-à-dire que l’utilisateur ne peut entrer qu’un âge compris entre 18 et 65 ans. Lorsque l’utilisateur saisit une valeur en dehors de cette plage, le sélecteur "out-of-range" est activé, et les styles CSS associés sont appliqués. Dans ce cas, le champ texte deviendra bordé de rouge et aura un fond rose pâle pour indiquer visuellement l’erreur.

Il est primordial de souligner que l’exemple donné est simplifié à des fins d’illustration. Dans un projet réel, le code CSS peut être personnalisé pour s’adapter au design et au style de la page web. De plus, l’utilisation du sélecteur "out-of-range" peut être combinée avec d’autres pseudo-classes, propriétés CSS et méthodes de validation pour offrir une expérience utilisateur plus riche et fluide.

En somme, le sélecteur "out-of-range" représente un outil puissant dans l’arsenal des développeurs web pour garantir la saisie de données correctes et pertinentes dans les formulaires en ligne. Grâce à cette pseudo-classe, il est possible de fournir des retours visuels immédiats aux utilisateurs concernant les erreurs de saisie, contribuant ainsi à améliorer la qualité de l’interaction utilisateur sur les sites web.

<input type="number" min="18" max="99">

Dans l’exemple ci-dessous, le champ apparaît avec un fond jaune si vous tapez manuellement une valeur au dessus de 10 ou un dessous de 5.

input:out-of-range{   background-color: yellow; }

Nombre : <input type="number" min="5" max="10">

Testez vous-même ce sélecteur

Version : CSS3

Compatibilité

Internet Explorer ne prend pas en charge les sélecteurs hors plage !

Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Avantages	Inconvénients
Permet de styliser les éléments qui sont en dehors d’une plage spécifiée	Limité à l’application sur des éléments de formulaire de type nombre ou plage
Facilite la création d’une expérience utilisateur intuitive	Prise en charge inégale sur certains navigateurs plus anciens
Améliore la rétroaction visuelle pour l’utilisateur	Peut nécessiter des styles de secours pour une expérience utilisateur cohérente
Contribue à la création de formulaires plus conviviaux	Doit être utilisé judicieusement pour éviter une conception confuse

      
   Maxime GUINARD | Développeur & Webdesigner WordPress indépendant
   148 avis Google 
  Écrire un avis 
  
 
 
   
 
 
        
   Myriam SRIKANTHA 
 2023-12-21
 
 
  Maxime GUIMARD a pris le temps de présenter son métier, auprès de mes classes de lycéen.  Présentation efficace, claire et compréhensible. Il a été à l’écoute des questions des lycéens.  Un grand merci à lui d’avoir pris le temps d’expliquer sa passion !
  
 
       
   Philippe BERTIEAUX 
 2023-10-01
 
 
  Maxime a une capacité que peu de SEO managers ont à ce jour ; celle de pouvoir s'adapter de manière extrêmement rapide et d'une manière particulièrement efficace, à toutes situations techniques inconfortables, mêmes les plus délicates. Le résultat est toujours au rendez-vous. Merci Maxime.
  
 
       
   Cuong Doan 
 2023-09-30
 
 
  J'ai travaillé avec Maxime sur un projet d'optimisation, où nous avons indexé les pages sur Google Search Console et effectué des corrections techniques en SEO. Il a réussi à résoudre tous les problèmes. Il est toujours disponible pour répondre à toutes les questions, très professionnel. C'était un plaisir de travailler avec lui ????????????.
  
 
       
   Artus Trézières 
 2023-09-30
 
 
  J'ai adoré travailler avec Maxime. Il est à l'écoute, gentil, et très compétent. De plus, il travaille extrêmement bien. Je le recommande vivement !
  
 
       
   Romain Knockaert 
 2023-09-01
 
 
  J'ai commandé auprès de Maxime une base pour un serveur Garry's Mod, n'ayant ni les compétences nécessaires ni le temps, il m'a aidé et m'a fourni une base propre avec des addons qu'il a fait lui-même pour un prix plus que raisonnable ! Grâce à lui j'ai pu gagner beaucoup de temps pour l'exécution de mon projet 🙂 je recommande !
  
 
       
   maha 
 2023-08-27
 
 
  Maxime GUINARD se distingue vraiment en tant que développeur web indépendant de haut calibre ! Sa maîtrise du développement WordPress et du design web est tout simplement impressionnante. Je suis extrêmement satisfaite de la qualité de son travail et je n'ai aucune hésitation à le recommander chaudement. Il mérite amplement toutes les étoiles possibles, soit 5 étoiles sans aucun doute !
  
 
       
   Nathou M 
 2023-05-24
 
 
  Super !
  
 
       
   Mario Mario 
 2023-05-24
 
 
  Super site web
  
 
       
   Mitsuko 
 2022-07-14
 
 
  Hello,  Maxime ma fait un super site web et aussi une carte en 3D ! J'ai passé 6 mois avec Maxime pour le tout. J'ai eu la chance de faire de superbes rencontres et de découvrir Maxime. Quelqu'un de dévouée et super bienveillant qui m'a permis de grandir et de m'accompagner tout au long de ma commande. Maxime est à l'écoute !
  
 
       
   M Mestchersky 
 2022-04-11
 
 
  Maxime is an excellent web developer and SEO consultant. Need any SEO advice? He is the one you're looking for.