files/fr/web/css/integer/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

---
title: <integer>
slug: Web/CSS/integer
tags:
  - CSS
  - Reference
  - Type
translation_of: Web/CSS/integer
---
<div>{{CSSRef}}</div>

<p>Le type de donnée CSS <strong><code>&lt;integer&gt;</code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe <code>+</code> ou <code>-</code>. Il n'y a pas d'unité pour ce type de donnée.</p>

<p>Toutes les valeurs de type <code>&lt;integer&gt;</code> sont également des valeurs de type {{cssxref("&lt;number&gt;")}}, bien que l'inverse ne soit pas vrai.</p>

<div class="note">
  <p><strong>Note :</strong> Il n'y a pas de bornes à l'ensemble des valeurs de type <code>&lt;entier&gt;</code> valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27</sup>-1; 2^27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</p>
</div>

<h2 id="Interpolation">Interpolation</h2>

<p>Les valeurs du type <code>&lt;entier&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.</p>

<h2 id="Exemples">Exemples</h2>

<p>Ces valeurs sont des entiers valides :</p>

<pre class="brush: css">12          Entier positif (sans le signe + à l'avant)
+123        Entier positif (avec le signe + à l'avant)
-456        Entier négatif
0           Zéro
+0          Zéro, avec un signe + à l'avant
-0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
</pre>

<p>Ces valeurs sont des entiers non valides :</p>

<pre class="brush: css example-bad">12.0        Ceci est un {{cssxref("&lt;number&gt;")}}, pas un &lt;entier&gt;, bien qu'il représente un entier
12.         Le point ne peut pas faire partie d'un &lt;entier&gt;
+---12      Un seul +/- à l'avant est accepté
ten         Les lettres ne sont pas acceptées
_5          Les caractères spéciaux ne sont pas acceptés
\35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
\4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS4 Values')}}</td>
   <td>Aucune modification significative.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Aucune modification depuis la spécification CSS de niveau 2 (première révision)</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition implicite.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition implicite.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.types.integer")}}</p>

<h2 id="Voir_aussi"> Voir aussi</h2>

<ul>
 <li>{{cssxref("&lt;number&gt;")}}</li>
</ul>