Réaliser des Compteurs Automatiques en CSS

Les compteurs
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
3,0
59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre comment utiliser les propriétés CSS counter-reset et counter-increment pour gérer des compteurs automatiques, et d'apprendre à insérer ces compteurs dans des éléments HTML en utilisant la propriété content.

Apprenez à implémenter des compteurs automatiques pour vos éléments HTML grâce à du simple CSS, sans JavaScript ni jQuery.

Dans cette leçon, nous abordons la manière de comptabiliser automatiquement les éléments et sous-éléments d'une page HTML à l'aide de CSS. Cette technique est particulièrement utile dans les contextes où le contenu provient d'une base de données, car elle permet une gestion dynamique des numéros de chapitres et de sous-chapitres. Nous commençons par utiliser la propriété counter-reset pour initialiser nos compteurs, puis nous implémentons counter-increment pour incrémenter ces compteurs au sein de nos différents éléments. Grâce à la propriété content, nous insérons les résultats des compteurs dans nos balises HTML. Enfin, nous détaillons les avantages de cette méthode par rapport à l'utilisation de JavaScript ou jQuery, en soulignant la simplicité et l'efficacité du CSS pur pour des tâches de comptabilisation automatique. Ce tutoriel est idéal pour les développeurs travaillant avec des pages générées dynamiquement et souhaitant maintenir une structure de contenu claire et organisée.

Voir plus
Questions réponses
Pourquoi utiliser la propriété CSS counter-reset ?
La propriété CSS counter-reset est utilisée pour initialiser un compteur à une valeur spécifique, souvent zéro, afin de commencer le comptage des éléments.
Quels sont les avantages d'utiliser CSS pour la comptabilisation automatique par rapport à JavaScript ?
Utiliser CSS pour la comptabilisation automatique évite le surcoût de traitement et de complexité induit par JavaScript ou jQuery, en offrant une solution plus simple et rapide pour certains cas d'usage.
Comment insérer le résultat d'un compteur dans une balise HTML ?
Le résultat d'un compteur peut être inséré dans une balise HTML en utilisant la propriété CSS content, ce qui permet d'afficher dynamiquement la valeur du compteur après un élément spécifique.
Pour continuer dans le même esprit que les contenus générés, nous avons la possibilité également de réaliser des compteurs. C'est intéressant, dans le cas de cette page par exemple, nous allons pouvoir comptabiliser le nombre d'éléments articles et le nombre de sous-articles à l'intérieur de chacun des articles. Donc là nous allons avoir l'article 1, le sous-article 1, le sous-article 2, le sous-article 3, l'article 2, etc. C'est une comptabilité automatique. Ça peut être intéressant dans le cadre d'éléments, dans le cadre de textes qui proviennent d'une base de données, puisque là, du coup, on ne gère absolument pas le nombre d'éléments qui vont arriver dans la page. Donc effectivement, dans le cadre d'une page statique, l'intérêt est beaucoup moins évident, mais pour de la base de données, ça l'est tout à fait, d'autant plus qu'ici, il n'y aura donc pas de JavaScript ni de jQuery, il n'y a pas d'éléments informatiques particuliers. Alors, nous allons déjà commencer, donc on va prendre le premier élément situé tout en haut, c'est celui-là, content, et donc nous allons dire que lui, c'est la base des chapitres. Donc jazz, content, et on spécifie counter, counter reset, et on va donner un nom que l'on utilisera plus tard, c'est par exemple chapter, voilà. La base des chapitres, c'est lui qui va les gérer. Ensuite, on va donner, toujours dans content, content alors, content ici, content, nous utilisons ensuite les différents articles qui sont là, et puis qui sont en dessous, donc content, article, et on va dire content article after, donc immédiatement après l'élément h1 de article, on va lui demander de comptabiliser le numéro du chapitre et puis de l'incrémenter. Alors, voilà, donc content article h1, donc c'est au niveau de cette balise, et puis surtout, on demande que ce soit placé après after, on pourrait mettre before également. Donc ça, nous l'avons vu, c'est cette propriété-là, donc on va ajouter, c'est du contenu généré, alors on va ajouter un contenu pour l'instant vide, donc je mets guillemets, espaces, guillemets, donc c'est important, et puis immédiatement après, on demande de écrire counter, et puis chapter. Donc le numéro du chapitre. Ensuite, donc propriété suivante par rapport à ce sélecteur, on va dire, bah voilà, maintenant il va falloir l'incrémenter. Counter, incrémente, et comme on l'incrémente, on l'incrémente avec toujours cette variable chapter. Voilà pour celui-là. Alors ensuite, par rapport à nos articles, on va dire les h1, donc de la même manière que ce qu'on a fait là-haut, les h1, et bien ce sont des counter-reset. Counter-reset, alors on ne va pas mettre la même variable que précédente, on va mettre une variable qui s'appelle article, par exemple. Puis ensuite, au niveau de ce que nous avons là, donc là nous sommes dans article, au niveau des h2, parce que c'est ceux-là qui nous intéressent maintenant, du coup les h1, ce sont des points zéros, je dirais, et puis on va comptabiliser le nombre de h2 qui sont sous les h1. Donc h2, alors after, pareil, on va faire le même principe, et on va écrire content, alors entre guillemets, je vais écrire numéro, un espace, un petit tiré, un espace, par exemple, et puis tout de suite, counter, et la variable qui nous intéresse ici, c'est article. Voilà, et puis on n'oublie pas d'incrémenter, donc counter-increment, avec le mot de notre variable qui est article. J'enregistre, voilà, donc là nous avons l'ensemble réalisé, nous n'allons plus voir le résultat, donc nous avons bien, pour l'instant, tout ce qui nous intéresse. Alors là, j'ai oublié un petit truc, on va le rajouter tout de suite, d'ailleurs, donc, espace, voilà. donc, article numéro un, article numéro deux, article numéro trois, donc là tout va bien, ce sont les chapitres, et puis sous-titres, numéro un, numéro deux, numéro trois, et ensuite on est de nouveau sur numéro un, de nouveau sur numéro un, de nouveau sur numéro un, etc., etc., nous pourrions ainsi de suite, nous aurons de nouveau, de nouveau sur numéro un, de nouveau sur numéro un, etc., etc., nous pourrions ainsi de suite comptabiliser tous les éléments de notre page, alors, bien évidemment, à condition qu'elle soit correctement structurée, mais c'est quand même quelque chose d'également très pratique par rapport à une simple écriture CSS.

Programme détaillé de la formation

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 year
Commentaire
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5