oujood.com

Comment créer une numérotation à l'aide de la propriété counter-increment en CSS ?

Ici on vous donnera une idée de la manière d'utiliser les propriétés counter-reset et counter-increment en CSS. Utilisation des propriétés counter-reset et counter-increment pour définir le nombre d'éléments HTML dans une page Web.

chercher |

Définition et utilisation des propriétés css counter-increment et counter-reset

La propriété CSS counter-increment est utilisée pour incrémenter/décrémenter la valeur d'un compteur. Un compteur CSS est une variable qui sert à suivre le nombre de fois où une variable est utilisée.

La propriété counter-increment est généralement utilisée conjointement avec la propriété counter-reset et la propriété content.

Cette propriété peut être utilisée pour définir l'incrémentation/décrémentation de la valeur d'un compteur. Pour organiser les données correctement, il est nécessaire de les formater afin de rendre une page Web attrayante. Nous pouvons définir le nombre d'éléments HTML de plusieurs façons. Le plus simple est de définir les nombres manuellement, ce qui n'est pas une bonne pratique. Nous pouvons utiliser la liste HTML qui peut être une liste ordonnée ou non ordonnée. Cependant, l'utilisation de la liste par rapport aux propriétés de compteur CSS présente quelques inconvénients, qui sont présentés ci-dessous :

Nous pouvons utiliser le compteur CSS pour définir les comptes de la liste complexe.
Les utilisateurs peuvent ajouter un design personnalisé aux comptes, alors que la liste numérotée ne permet pas de personnalisation.

Les utilisateurs peuvent définir le point de départ du compteur.

La caractéristique la plus utile est que nous pouvons définir la valeur incrémentielle en utilisant le compteur CSS, alors que la liste numérotée n'augmente la valeur que de 1.
Il existe plusieurs façons de numéroter avec les compteurs CSS.

La Syntaxe CSS
Initialise la variable compteur.
counter-reset : compteur ;

Augmente la variable compteur.
counter-increment : compteur ;

Ajoute le compteur au contenu.
content : counter(compteur) ;
Valeurs par défautnone
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS2
Syntaxe JavaScript: object.style.counterReset="section"
object.style.counterIncrement = "section";

Prise en charge de la propriété css dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4.08.02.03.19.6

Valeurs de la propriété

none Valeur par défaut. Aucun compteur ne sera incrémenté
id nombre L'id définit le compteur à incrémenter. Le nombre définit de combien le compteur sera incrémenté à chaque occurrence du sélecteur.
L'incrémentation par défaut est de 1. Les valeurs négatives sont autorisées. Si id fait référence à un compteur qui n'a pas été initialisé par counter-reset, la valeur initiale par défaut est 0.
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.

Exemple : Voici un exemple simple qui démontre l'utilisation des compteurs CSS.

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
 <title>CSS counters</title>
    <style>
        /* Initialisation de la variable du compteur */
        body {
            counter-reset: compteur;
        }
  
        /* Incrémentation de la valeur de la variable compteur */
        p {
            counter-increment: compteur;
            color: green;
        }
  
        /* Ajouter un compteur au contenu */
        p:before {
            content: counter(compteur) ". ";
        }
    </style>
</head>
  
<body>
    <p> www.oujood.com </p>
    <p>oujood</p>
	<p>oujood</p>
	<p>oujood</p>
	
</body>
</html>

Modification de la valeur de départ et de l'incrément du compteur CSS :

Les valeurs de départ et d'incrémentation par défaut du compteur CSS sont respectivement 0 et 1. Nous pouvons modifier la valeur de départ par défaut en définissant la valeur de la variable counter-reset.
Quelle que soit la valeur que nous définissons pour la variable counter-reset, le compteur commencera à compter à partir de la valeur qui est la somme de la valeur initiale et de la valeur incrémentielle. Par exemple, si nous initialisons la variable counter-reset avec 1 et que le counter-increment est de 2, il commencera la numérotation à partir de 3.

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
 <title>CSS counters</title>
     <style>
      
    /* Initialisation de la variable du compteur avec -2*/
    body {
        counter-reset: compteur -2;
    }
      
    /* Incrémentation de la valeur de la variable compteur de 2 */
    p {
        counter-increment: compteur 2;
		font-weight:800;
    }
      
    p:before {
        content: counter(compteur) "- ";
    }
    </style>
</head>
  
<body>
    <p> www.oujood.com </p>
    <p>oujood</p>
	<p>oujood</p>
	<p>oujood</p>
	
</body>
</html>

Changer le compteur avec JavaScript

Exemple       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
 <title>CSS counters avec javascript </title>
     <style>
h2 {
  counter-increment: compteur;
}

h2::before {
  content: "Section " counter(compteur) " ";
}
</style>
</head>
<body>

<h2 id="monH2">HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScripts Tutorial</h2>

<p>Cliquez sur le bouton "Changer" pour modifier le contre-incrément du deuxième élément h2 :</p>

<button onclick="maFonction()"> Changer </button>

<script>
function maFonction() {
  document.getElementById("monH2").style.counterIncrement = "subsection";
}
</script>
	
</body>
</html>




Voir aussi nos tutoriel :

les cookies

Les cookies : Définition et utilisation des cookies en javascript.

L'attribut spellcheck

Spécifie si l'élément doit avoir son orthographe et la grammaire coché ou non

Balise basefont

Non pris en charge HTML5. Obsolète en HTML 4.01. Spécifie une couleur par défaut, la taille et la police pour tout le texte dans un document