Dans le passé, la création de composants personnalisés nécessitait des combinaisons complexes de HTML, CSS et JavaScript. Cependant, les progrès du CSS ces dernières années nous permettent de créer de nombreux composants en utilisant uniquement HTML et CSS , en tirant parti de la logique déjà intégrée aux navigateurs. Pourquoi réinventer la roue quand on peut en réutiliser la majeure partie ?
Des composants simples tels que des cases à cocher, des boutons radio et des commutateurs à bascule peuvent être créés avec HTML et CSS tout en s'appuyant sur le navigateur pour ses fonctionnalités. Mais nous ne nous limitons pas à de simples composants. Des composants plus complexes peuvent également être réalisés de cette façon.
Dans cet article, nous explorerons comment créer un système de notation par étoiles à l'aide d'un seul code HTML et d'une seule commande JavaScript.
Un composant de notation par étoiles est essentiellement une plage de valeurs parmi lesquelles les utilisateurs peuvent en sélectionner une. Les variations peuvent inclure 5 valeurs (une par étoile) ou 10 valeurs (autorisant des demi-étoiles), mais l'idée reste la même - les utilisateurs peuvent sélectionner une valeur, et une seule.
HTML fournit un type d'entrée conçu pour les plages, que nous pouvons utiliser comme base pour notre composant :
<input type="range">
Dans l'état actuel des choses, cette entrée n'est pas très utile. Nous devons définir certains attributs en fonction de nos spécifications de conception :
Sur la base des spécifications ci-dessus, le code HTML ressemblera à ceci :
<input type="range" min="0.5" max="5" step="0.5" value="2.5">
Ce composant est une entrée de plage () qui permet aux utilisateurs de sélectionner une valeur comprise entre 0,5 (min="0,5") et 5 étoiles (max="5") par incréments de 0,5 (étape="0,5"). La valeur initiale est fixée à 2,5 étoiles (value="2.5").
Définir la valeur minimale de 0,5 au lieu de 0 peut sembler inhabituel, mais il y a une raison pratique à cela. Autoriser un avis avec 0 étoile créerait 11 valeurs potentielles, mais la plage représente visuellement 10 valeurs (10 demi-étoiles), créant un décalage entre les zones cliquables et les étoiles de la plage. Ce choix de conception garantit une meilleure convivialité et simplifie la mise en œuvre ultérieure.
Ce problème serait partiellement résolu en créant le composant à l'aide de 11 boutons radio. Mais cela soulèverait de nouveaux problèmes de conception (comment sélectionner la valeur 0 à l'aide de la souris ?), d'utilisabilité (devrions-nous imiter le comportement natif d'une entrée de plage ou le comportement natif des boutons radio ?) et d'accessibilité (comment nous gérons le focus pour le composant dans son ensemble ?)
Ce sont d'excellentes questions pour un autre tutoriel sur la façon de créer un composant de notation à l'aide de boutons radio. Pour ce tutoriel sur la façon de créer le composant à l'aide d'un seul élément HTML, j'ai opté pour une valeur minimale de 0,5 pour éviter ces complexités.
Nous ajouterons quelques ajustements plus tard, mais ce code fonctionne comme un point de départ solide. Sans aucun CSS, il ressemble visuellement à une entrée de plage standard :
Ensuite, nous ajouterons quelques attributs supplémentaires. Même s'ils ne semblent pas importants pour le moment, ils le seront plus tard :
Le code final ressemblera à ceci (formaté pour plus de lisibilité) :
<input type="range">
Dans la section suivante, nous affinerons un peu cette règle. Il va falloir définir des styles pour Chrome/Safari et pour Firefox, et cela amènera quelques répétitions. Nous pouvons rationaliser le processus en utilisant des propriétés personnalisées pour stocker les valeurs et les appliquer dans les deux styles.
La piste occupera toute la taille de l'élément, puis nous utiliserons un dégradé pour colorer les parties dont nous avons besoin.
Nous n'avons pas à nous soucier de la largeur – elle occupera toute la largeur de l'élément –, mais la hauteur est une autre histoire. Alors que Chrome et Firefox font correspondre la hauteur de la piste à celle du conteneur, Safari ne le fait pas. Il faudra donc indiquer explicitement une hauteur de 100%.
Ensuite, nous voulons définir la zone colorée. Nous exploiterons les propriétés personnalisées --val et --size que nous avons créées précédemment. Nous allons définir un dégradé linéaire de gauche à droite qui change de couleur au point indiqué par la propriété --val :
<input type="range" min="0.5" max="5" step="0.5" value="2.5">
Nous allons déplacer ce dégradé vers une autre propriété personnalisée dans l'élément parent. Cela nous permet de réutiliser la valeur pour Chrome/Safari et Firefox – comme je l'ai déjà mentionné… et je le mentionnerai probablement plus tard.
Avec cela, nous avons un rectangle avec une zone plus sombre représentant la valeur sélectionnée. La zone noire change à mesure que nous cliquons ou glissons sur le rectangle, ce qui est la fonctionnalité souhaitée, mais il lui manque les visuels. Nous avons besoin de masques CSS.
Je ne le nierai pas, la partie suivante est moche. J'ai choisi d'opter pour le CSS, sans m'appuyer sur des images externes ou des SVG en ligne. Vous pouvez simplifier le code en utilisant l'une de ces options.
Le code suivant concerne le composant de notation en forme d'étoile, mais nous pourrions facilement changer la forme (par exemple, en cercles), en changeant le masque.
Nous utiliserons un ensemble de dégradés coniques pour découper une étoile à cinq branches à l'aide de masques CSS. Il prend en compte la taille de la plage saisie, donc une fois le masque répété horizontalement, nous obtiendrons cinq étoiles :
<input type="range">
Comme pour le dégradé linéaire ci-dessus, nous appliquerons ce masque dans les styles pour Chrome/Safari et Firefox. Pour éviter la répétition du code, nous le définirons dans une propriété personnalisée au sein de l'élément parent.
Le code final ressemblera à ceci :
<input type="range" min="0.5" max="5" step="0.5" value="2.5">
Remarquez à quel point le code de Webkit et de Firefox est presque identique. Une fonctionnalité telle que les mixins en CSS serait incroyablement utile dans des situations comme celle-ci, même si avoir un seul standard pris en charge serait encore mieux.
Nous avons également ajouté quelques styles (print-color-adjust: exact) pour garantir que le composant est imprimé exactement tel qu'il apparaît à l'écran. Ceci est utile lorsque vous travaillez avec des arrière-plans, car ils ne sont généralement pas imprimés par défaut.
Dans le cas de ce système de notation par étoiles, le pouce n'est pas particulièrement important. L'effet visuel est obtenu en utilisant la piste elle-même. Nous allons donc cacher le pouce.
On peut le faire en réglant son opacité à zéro :
<input type="range" min="0.5" max="5" step="0.5" value="2.5" > <h2> The CSS </h2> <p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>
And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.
From here, the next steps are as follows:
Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.
The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.
Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.
Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.
.star-rating {
--size: 2rem;
height: var(--size);
width: calc(5 * var(--size));
appearance: none;
border: 0;
}
Vous avez peut-être remarqué que je n'ai pas utilisé l'imbrication CSS dans les extraits de code ci-dessus (alors que je l'ai utilisé dans les démos ci-dessous). En effet, l'imbrication est relativement nouvelle et comporte certaines limitations : de nombreux navigateurs plus anciens ne la prennent pas en charge, et certains navigateurs modernes ont également du mal avec des pseudo-éléments non standard. J'ai signalé un bug sur WebKit concernant ce comportement sur Safari.
On dit qu’une image vaut mille mots. Voici donc quelques exemples de plages d'entrée pouvant être codées à l'aide d'un seul élément HTML.
Commençons par le composant de notation par étoiles décrit dans cet article :
Ensuite, un exemple coloré. Il a une forme atypique et il nécessite de styliser toutes les parties d'une entrée de gamme : la gamme en elle-même, la piste, et le pouce :
Enfin, un de mes préférés : un composant animé de satisfaction des utilisateurs à élément unique. Choisissez l'un des différents visages et ils bougeront en fonction de la sélection :
Il existe de nombreuses façons différentes de coder ce composant. Je l'ai fait en utilisant uniquement HTML et CSS (avec une commande JavaScript en ligne), mais vous pouvez également utiliser des images ou plus de JavaScript pour éviter cette vilaine inline.
L'idée clé est qu'avec un minimum de modifications HTML et CSS, vous pouvez ajuster les spécifications et votre système de notation par étoiles se comportera légèrement différemment ou aura un aspect complètement différent.
Le composant peut également être recréé à l'aide de plusieurs boutons radio, ce qui éliminerait le besoin de la ligne JavaScript et de certains CSS. C'est une approche valable. Cela nécessiterait du code supplémentaire pour garantir l'accessibilité et reproduire le comportement par défaut fourni avec une plage d'entrée. Certains trouveront peut-être cette approche plus facile, et c'est certainement faisable.
C'est l'une des choses que j'aime le plus dans le développement de logiciels : il existe de nombreuses approches et options différentes, chacune avec ses avantages et ses inconvénients, et toutes sont magnifiquement réalisables.
J'espère que vous avez apprécié l'article. Continuez à coder !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Utilisation de getproperty
Qu'est-ce que la crypto-monnaie kol
Utilisation de distinct en SQL
cmccedu
Nettoyer le registre
Quelle est la différence entre le blocage et la suppression sur WeChat ?
html définir la taille de la couleur de la police
Comment résoudre le problème selon lequel Apple ne peut pas télécharger plus de 200 fichiers
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
