hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Compter les changements d'état HTML en temps réel avec CSS

Le comptage est une tâche omniprésente dans les applications Web. Combien de courriels non lus avez-vous? Combien de tâches ne sont pas cochées sur votre liste de tâches? Combien de goûts de beignets sont emballés dans le panier? Toutes sont des questions cruciales auxquelles les utilisateurs méritent des réponses.

Ainsi, ce post vous montrera comment compter les éléments bi-déclarés, qui constituent la majorité des contrôles utilisateur tels que les cases à cocher et les saisies de texte, en utilisant des compteurs CSS .

Vous devez d'abord cibler ces états avec CSS, ce qui est possible grâce à des pseudo-classes et des attributs HTML qui nous permettent de le faire. Allez-y, expérimentez l'idée et explorez les différentes pseudo-classes qui peuvent indiquer dynamiquement le changement d'état d'un élément.

Nous allons commencer par les cases les plus simples.

1. Cases à cocher

Les cases à cocher passent en état "coché" lorsqu'elles sont cochées. La pseudo-classe vérifiée indique l'état vérifié .

 case à cocher # 1 
case à cocher n ° 2
case à cocher n ° 3

Vérifié:
Décoché:
 :: root {counter-reset: tickedBoxCount, unTickedBoxCount; } input [type = 'checkbox'] {contre-incrément: unTickedBoxCount; } input [type = 'checkbox']: vérifié {counter-increment: tickedBoxCount; } #tickedBoxCount :: before {content: counter (tickedBoxCount); } #unTickedBoxCount :: before {content: counter (unTickedBoxCount); } 

Comme je l'ai déjà dit, ce cas est très simple. Nous définissons deux compteurs à l'élément racine et incrémentons chacun pour chaque case à cocher pour ses deux états, respectivement. Les valeurs de compteur sont ensuite affichées dans un emplacement désigné à l'aide de content propriété de content .

Si vous voulez mieux comprendre le fonctionnement des compteurs CSS, jetez un oeil à notre article précédent.

Ci-dessous, vous pouvez voir le résultat final. Lorsque vous cochez et décochez les cases, les valeurs des compteurs "Checked" et "Unchecked" sont modifiées en temps réel .

2. Entrées de texte

Nous pouvons également compter le nombre d'entrées de texte qui ont été remplies et combien ont été laissées vides par l'utilisateur. Cette solution ne sera pas aussi simple que la précédente, car contrairement aux cases à cocher, les entrées de texte n'ont pas de pseudo-classe à signaler lorsqu'elles sont remplies.

Donc, nous devons trouver un autre itinéraire. Il y a une pseudo-classe qui indique quand un élément a un texte d'espace réservé ; ça s'appelle :placeholder-shown .

Si nous utilisons des espaces réservés dans notre saisie de texte, nous pouvons savoir quand le champ de saisie est vide. Cela se produit lorsque l'utilisateur n'a encore rien tapé car l'espace réservé disparaît lorsque cela se produit.





Rempli:
Vide:
 :: root {counter-reset: rempliInputCount, videInputCount; } input [type = 'text'] {contre-incrément: filledInputCount; } input [type = 'text']: placeholder-shown {contre-incrément: emptyInputCount; } #filledInputCount :: before {content: counter (filledInputCount); } #emptyInputCount :: before {content: counter (emptyInputCount); } 

Le résultat est similaire au précédent: les deux compteurs sont automatiquement incrémentés et décrémentés lorsque nous ajoutons ou supprimons du texte dans les champs de saisie.

3. Détails

Les états alternatifs d'un élément ne doivent pas toujours être indiqués seulement par des pseudo-classes. Il pourrait y avoir des attributs HTML faisant ce travail, comme dans le cas du

élément.

le

élément affiche le contenu de son élément enfant . Lorsque l'utilisateur clique dessus, les autres contenus du
élément devient visible . Notez que élément doit toujours venir en premier parmi les enfants de
.

Alors,

a deux états : ouvert et fermé. L'état ouvert est indiqué par la présence de l'attribut HTML open dans l'élément . Cet attribut peut être ciblé dans CSS en utilisant son sélecteur d'attribut .

Q1: question n ° 1

Réponse 1

Q2: question n ° 2

réponse # 2

Q3: question n ° 3

réponse # 3



Ouvrir:
Fermé:
 :: root {counter-reset: openDetailCount, closedDetailCount; } details {contre-incrément: closedDetailCount; } details [open] {contre-incrément: openDetailCount; } #closedDetailCount :: before {content: counter (closedDetailCount); } #openDetailCount :: before {content: counter (openDetailCount); } 

Le résultat est à nouveau deux compteurs CSS en temps réel : ouvert et fermé.

4. Boutons radio

Le comptage des boutons radio nécessite une technique différente. Nous pourrions certainement utiliser la :checked pseudo-classe :checked nous avons utilisée pour les cases à cocher. Cependant, les boutons radio sont utilisés différemment des cases à cocher .

Les boutons radio sont destinés à être en groupes . L'utilisateur peut en sélectionner un seul dans un groupe. Chaque groupe agit comme une seule unité. Les deux états qu'un groupe de boutons radio peut avoir est soit l' un des boutons est sélectionné, soit aucun d'entre eux n'est sélectionné .

Ainsi, nous ne devrions pas compter les boutons radio par des boutons individuels, mais par des groupes de boutons . Pour y parvenir, nous utilisons le sélecteur :nth-of-type . Je l'expliquerai plus tard; Voyons d'abord le code.

 radio-1.1  radio-1.2  radio-1.3 
radio-2.1 radio-2.2 radio-2.3
radio-2.1 radio-2.2 radio-2.3

Choisi:
Non sélectionné:

Nous devons attribuer le même nom aux boutons radio du même groupe. Chaque groupe dans le code ci-dessus a trois boutons radio à l'intérieur.

 :: root {counter-reset: selectedRadioCount, unSelectedRadioCount; } input [type = 'radio']: nième-de-type (3n) {contre-incrément: unSelectedRadioCount; } input [type = 'radio']: nième-de-type (3n): vérifié {counter-increment: selectedRadioCount; } input [type = 'radio']: not (: nième-de-type (3n)): vérifié {counter-increment: unSelectedRadioCount -1 selectedRadioCount; } #selectedRadioCount :: before {content: counter (selectedRadioCount); } #unSelectedRadioCount :: before {content: counter (unSelectedRadioCount); } 

Les trois premières règles de style dans l'extrait ci-dessus sont les mêmes que celles que nous avons appliquées aux cases à cocher, mais au lieu de cibler chaque bouton radio, nous ciblons le dernier bouton radio de chaque groupe, qui est le troisième dans notre cas ( :nth-of-type(3n) ). Donc, nous ne comptons pas tous les boutons radio mais seulement un par groupe .

Cependant, cela ne nous donnera pas un résultat correct en temps réel, car nous n'avons pas encore donné de règle pour compter les deux autres boutons radio du groupe . Si l'un d'eux est coché, il devrait être compté et le résultat non vérifié devrait diminuer en même temps.

C'est pourquoi nous ajoutons une valeur -1 après unSelectedRadioCount dans la dernière règle de style qui cible les deux autres boutons radio d'un groupe. Quand l'un d'eux est coché, -1 diminuera le résultat non coché.

Le placement des comtes

Vous ne pouvez voir le résultat correct qu'une fois le comptage terminé, c'est-à-dire après que tous les éléments à compter ont été traités. C'est pourquoi nous devons placer l'élément à l'intérieur duquel nous afficherons les compteurs seulement après les éléments à compter dans le code source HTML.

Vous pouvez ne pas vouloir montrer les compteurs sous les éléments mais ailleurs sur la page. Dans ce cas, vous devez repositionner les compteurs à l' aide des propriétés CSS telles que translate, margin ou position .

Mais, ma suggestion serait d' utiliser la grille CSS afin que vous puissiez créer la mise en page de votre page indépendamment de l'ordre de ses éléments dans le code source HTML . Par exemple, vous pouvez facilement créer une grille qui place les compteurs au-dessus ou à côté des champs de saisie.

20 meilleurs cadeaux qui feront les enfants vont Bonkers

20 meilleurs cadeaux qui feront les enfants vont Bonkers

Des ordinateurs aux jouets numériques interactifs, les enfants se familiarisent avec la technologie dès leur plus jeune âge. Ces jouets deviennent des gadgets sophistiqués qui changent dynamiquement la définition du plaisir. Pourquoi se contenter d'un smartphone ou d'une tablette alors qu'il y a des centaines de gadgets éducatifs et cool que vous pouvez obtenir pour cet enfant spécial dans votre vie?Prenez

(Conseils techniques et de conception)

Derrière les signatures des 25 plus grands noms de Tech

Derrière les signatures des 25 plus grands noms de Tech

Vous êtes-vous déjà demandé combien vous pouviez dire de l'écriture ou de la signature de quelqu'un? Qu'une signature soit un nom complet, un surnom, juste les initiales ou un gribouillis, chaque type dit quelque chose sur la personnalité de la personne, comme les «i» non marqués, les majuscules prononcées, la lisibilité du nom et du prénom ou même l'usage d'une période dans la signature.Myprint247 a

(Conseils techniques et de conception)