diff options
Diffstat (limited to 'files/fr/web/css/custom-ident')
| -rw-r--r-- | files/fr/web/css/custom-ident/index.md | 203 |
1 files changed, 84 insertions, 119 deletions
diff --git a/files/fr/web/css/custom-ident/index.md b/files/fr/web/css/custom-ident/index.md index b9581cd660..adbb326658 100644 --- a/files/fr/web/css/custom-ident/index.md +++ b/files/fr/web/css/custom-ident/index.md @@ -7,122 +7,87 @@ tags: - Type translation_of: Web/CSS/custom-ident --- -<div>{{CSSRef}}</div> - -<p>Le type de données CSS <strong><code><custom-ident></code></strong> permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<p>La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur <code><custom-ident></code> est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :</p> - -<ul> - <li>n'importe quel caractère alphanumérique (<code>A</code> à <code>Z</code> ou <code>a</code> à <code>z</code>),</li> - <li>n'importe quel chiffre (<code>0</code> à <code>9</code>),</li> - <li>un tiret (<code>-</code>)</li> - <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li> - <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li> - <li>un caractère <a href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li> -</ul> - -<p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code><custom-ident></code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}.</p> - -<p>On notera que <code>id1</code>, <code>Id1</code>, <code>iD1</code> et <code>ID1</code> sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et <code>toto\?</code> et <code>toto\3F</code> représentent donc le même identifiant.</p> - -<h3 id="Liste_des_valeurs_interdites">Liste des valeurs interdites</h3> - -<p>Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise <code><custom-ident></code> définit également une liste de valeurs interdites :</p> - -<dl> - <dt>{{cssxref("animation-name")}}</dt> - <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd> - <dt>{{cssxref("counter-reset")}}</dt> - <dt>{{cssxref("counter-increment")}}</dt> - <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd> - <dt>{{cssxref("@counter-style")}}</dt> - <dt>{{cssxref("list-style-type")}}</dt> - <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>none</code>, <code>inline</code>, <code>outside</code> et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> et <code>disclosure-close</code>.</dd> - <dt>{{cssxref("grid-row-start")}}<br> - {{cssxref("grid-row-end")}}<br> - {{cssxref("grid-column-start")}}<br> - {{cssxref("grid-column-end")}}</dt> - <dd>Interdisent la valeur <code>span</code>.</dd> - <dt>{{cssxref("will-change")}}</dt> - <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> et <code>contents</code>.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<p>Voici des identifiants valides</p> - -<pre class="eval">nono79 Un mélange de caractères alphanumériques. -ground-level Un mélange de caractères alphanumériques avec un tiret. --test Un tiret suivi d'un mélange de caractères alphanumériques. -_internal Un tiret bas suivi d'un mélange de caractères alphanumériques. -\22 toto Un caractère Unicode suivi par une série de caractères alphanumériques. -bili\.bob Le point est bien échappé. -</pre> - -<p>Voici des identifiants invalides :</p> - -<pre class="eval">34rem Il ne doit pas démarrer par un chiffre. --12rad Il ne doit pas démarrer par un tiret suivi d'un chiffre. -bili.bob Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés. ---toto Il ne doit pas démarrer avec deux tirets. -'bilibob' Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}. -"bilibob" Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}. -</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('CSS Will Change', '#valdef-will-change-custom-ident', '<code><custom-ident></code> for <code>will-change</code>')}}</td> - <td>{{Spec2('CSS Will Change')}}</td> - <td>Définition des valeurs exclues pour {{cssxref("will-change")}}.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code><custom-ident></code> for <code>list-style-type</code>')}}</td> - <td>{{Spec2('CSS3 Counter Styles')}}</td> - <td>Utilisation de <code><custom-ident></code> à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code><custom-ident></code> for <code>counter-*</code>')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td><code><identifier></code> est renommé en <code><custom-ident></code>. Son utilisation est ajoutée pour la propriété <code>counter-set</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code><custom-ident></code> for <code>animation-name</code>')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>Définition des valeurs exclues pour {{cssxref("animation-name")}}.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#identifier-value', '<code><custom-ident></code>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><identifier></code> est renommé en <code><custom-ident></code>. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p><em>Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu.</em></p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{CSSxRef("<ident>")}}</li> - <li><a href="/fr/docs/tag/Type">Les différents types de données CSS</a></li> -</ul> +{{CSSRef}} + +Le type de données CSS **`<custom-ident>`** permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs. + +## Syntaxe + +La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur `<custom-ident>` est sensible à la casse et est une séquence de caractères dont les caractères peuvent être : + +- n'importe quel caractère alphanumérique (`A` à `Z` ou `a` à `z`), +- n'importe quel chiffre (`0` à `9`), +- un tiret (`-`) +- un tiret bas (_underscore_) (`_`), +- un caractère échappé via une barre oblique inversée (`\`), +- un caractère [Unicode](http://en.wikipedia.org/wiki/Unicode) (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode). + +Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur `<custom-ident>` ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}. + +On notera que `id1`, `Id1`, `iD1` et `ID1` sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et `toto\?` et `toto\3F` représentent donc le même identifiant. + +### Liste des valeurs interdites + +Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise `<custom-ident>` définit également une liste de valeurs interdites : + +- {{cssxref("animation-name")}} + - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que la valeur `none`. +- {{cssxref("counter-reset")}} + + {{cssxref("counter-increment")}} + + - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que la valeur `none`. + +- {{cssxref("@counter-style")}} + + {{cssxref("list-style-type")}} + + - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que les valeurs `none`, `inline`, `outside` et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : `disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open` et `disclosure-close`. + +- {{cssxref("grid-row-start")}} + {{cssxref("grid-row-end")}} + {{cssxref("grid-column-start")}} + {{cssxref("grid-column-end")}} + - : Interdisent la valeur `span`. +- {{cssxref("will-change")}} + - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que les valeurs `will-change`, `auto`, `scroll-position` et `contents`. + +## Exemples + +Voici des identifiants valides + + nono79 Un mélange de caractères alphanumériques. + ground-level Un mélange de caractères alphanumériques avec un tiret. + -test Un tiret suivi d'un mélange de caractères alphanumériques. + _internal Un tiret bas suivi d'un mélange de caractères alphanumériques. + \22 toto Un caractère Unicode suivi par une série de caractères alphanumériques. + bili\.bob Le point est bien échappé. + +Voici des identifiants invalides : + + 34rem Il ne doit pas démarrer par un chiffre. + -12rad Il ne doit pas démarrer par un tiret suivi d'un chiffre. + bili.bob Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés. + --toto Il ne doit pas démarrer avec deux tirets. + 'bilibob' Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}. + "bilibob" Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code><custom-ident></code> for <code>will-change</code>')}} | {{Spec2('CSS Will Change')}} | Définition des valeurs exclues pour {{cssxref("will-change")}}. | +| {{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code><custom-ident></code> for <code>list-style-type</code>')}} | {{Spec2('CSS3 Counter Styles')}} | Utilisation de `<custom-ident>` à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}. | +| {{SpecName('CSS3 Lists', '#counter-properties', '<code><custom-ident></code> for <code>counter-*</code>')}} | {{Spec2('CSS3 Lists')}} | `<identifier>` est renommé en `<custom-ident>`. Son utilisation est ajoutée pour la propriété `counter-set`. | +| {{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code><custom-ident></code> for <code>animation-name</code>')}} | {{Spec2('CSS3 Animations')}} | Définition des valeurs exclues pour {{cssxref("animation-name")}}. | +| {{SpecName('CSS3 Values', '#identifier-value', '<code><custom-ident></code>')}} | {{Spec2('CSS3 Values')}} | `<identifier>` est renommé en `<custom-ident>`. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues. | +| {{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +_Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu._ + +## Voir aussi + +- {{CSSxRef("<ident>")}} +- [Les différents types de données CSS](/fr/docs/tag/Type) |