From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/cursor/index.md | 644 ++++++++++++++++++++++----------------- 1 file changed, 366 insertions(+), 278 deletions(-) (limited to 'files/fr/web/css/cursor') diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md index 2931c1851a..b480e8503f 100644 --- a/files/fr/web/css/cursor/index.md +++ b/files/fr/web/css/cursor/index.md @@ -15,15 +15,16 @@ tags: translation_of: Web/CSS/cursor browser-compat: css.properties.cursor --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété CSS cursor définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.

+La propriété CSS **`cursor`** définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément. -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+{{EmbedInteractiveExample("pages/css/cursor.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 cursor: pointer;
 cursor: auto;
 
@@ -38,239 +39,343 @@ cursor: url(cursor2.png) 2 2, pointer;
 cursor: inherit;
 cursor: initial;
 cursor: unset;
-
- -

La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <url> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <url> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.

- -

Chaque <url> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <x><y> Ces coordonnées permettent de paramétrer le point d'action (hotspot) du curseur par rapport au coin en haut à gauche de l'image.

- -

Par exemple, on peut indiquer deux images grâce à deux valeurs <url> et fournir des coordonnées <x><y> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé progress :

- -
cursor: url(one.svg), url(two.svg) 5 5, progress;
- -

Valeurs

- -
-
<url>
-
Une url(…) ou une liste d'URL séparées par des virgules url(…), url(…), … pointant vers un fichier image. On peut utiliser plusieurs url(), au cas où certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.
-
<x> <y> {{experimental_inline}}
-
Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.
-
Valeurs utilisant un mot-clé
-
-

Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CatégorieValeur CSSRenduDescription
GénéralautoLe navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à text lors du survol du texte).
defaultdefault.gifLe curseur par défaut de la plateforme (qui est généralement une flèche).
noneAucun curseur n'est affiché.
Liens & étatscontext-menucontext-menu.pngUn menu contextuel est disponible sous le curseur. Seul IE 10 et les versions supérieures ont implémenté cette valeur Bur Windows : bug 258960.
helphelp.gifLe pointeur indique qu'une aide est disponible.
pointerpointer.gifLe curseur est un pointeur qui indique un lien ; généralement c'est une main.
progressprogress.gifLe programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
waitwait.gifLe programme est occupé, empêchant toute interaction.
Sélectioncellcell.gifLe pointeur indique que la ou les cellules du tableau peuvent être sélectionnées.
crosshaircrosshair.gifUn curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
texttext.gifLe pointeur indique que le texte peut être sélectionné.
vertical-textvertical-text.gifLe pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposeraliasalias.gifLe pointeur indique qu'un alias ou qu'un raccourci sera créé.
copycopy.gifLe pointeur indique que quelque chose devra être copié.
movemove.gifL'objet survolé devra être déplacé.
no-dropno-drop.gifLe curseur indique qu'on ne peut pas déposer d'élément à cet endroit. bug 275173 pour Windows et Mac OS X, « no-drop a le même effet que not-allowed ».
grabgrab.gif -

Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.

-
grabbinggrabbing.gif
not-allowednot-allowed.gifLe curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilementall-scrollall-scroll.gifLe curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction. Bug 275174 pour Windows, « all-scroll a le même effet que move".
col-resizecol-resize.gifL'élément ou la colonne peut être redimensionné horizontalement.
row-resizerow-resize.gifL'élément ou la ligne peut être redimensionné verticalement.
n-resizeExemple de redimensionnement vers le haut -

Un bord peut être déplacé. Par exemple, le curseur se-resize peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.

- -

Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. n-resize et s-resize sont synonymes de ns-resize).

-
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifLe pointeur indique un redimensionnement bidirectionnel.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif -

Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.

-
zoom-outzoom-out.gif
-
-
- -

Syntaxe formelle

+``` + +La propriété `cursor` peut être définie grâce à zéro ou plusieurs valeurs [``](#url) séparées par des virgules et suivi par un unique [mot-clé obligatoire](#mot-clé). Chaque `` doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final. + +Chaque `` peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) [``](#xy) Ces coordonnées permettent de paramétrer le point d'action (_hotspot_) du curseur par rapport au coin en haut à gauche de l'image. + +Par exemple, on peut indiquer deux images grâce à deux valeurs `` et fournir des coordonnées `` pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé `progress` : + +```css +cursor: url(one.svg), url(two.svg) 5 5, progress; +``` + +### Valeurs + +- `` + - : Une `url(…)` ou une liste d'URL séparées par des virgules `url(…), url(…), …` pointant vers un fichier image. On peut utiliser plusieurs [`url()`](), au cas où certains types d'images ne sont pas pris en charge. Il est _obligatoire_ qu'une valeur non-URL soit présente à la fin de cette liste. +- `` `` {{experimental_inline}} + - : Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32. +- Valeurs utilisant un mot-clé + + - : **Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CatégorieValeur CSSRenduDescription
Généralauto + Le navigateur détermine le curseur à afficher en fonction du contexte + (par exemple, l'effet sera équivalent à text lors du survol + du texte). +
defaultdefault.gif + Le curseur par défaut de la plateforme (qui est généralement une + flèche). +
noneAucun curseur n'est affiché.
Liens & étatscontext-menucontext-menu.png + Un menu contextuel est disponible sous le curseur. Seul IE 10 et les + versions supérieures ont implémenté cette valeur Bur Windows : + bug 258960. +
helphelp.gifLe pointeur indique qu'une aide est disponible.
pointerpointer.gif + Le curseur est un pointeur qui indique un lien ; généralement c'est une + main. +
progressprogress.gif + Le programme est occupé en arrière-plan mais l'utilisateur peut toujours + interagir avec l'interface (à la différence de wait). +
waitwait.gifLe programme est occupé, empêchant toute interaction.
Sélectioncellcell.gif + Le pointeur indique que la ou les cellules du tableau peuvent être + sélectionnées. +
crosshaircrosshair.gif + Un curseur en forme de croix, généralement utilisé pour indiquer une + sélection sur une image. +
texttext.gifLe pointeur indique que le texte peut être sélectionné.
vertical-textvertical-text.gifLe pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposeraliasalias.gifLe pointeur indique qu'un alias ou qu'un raccourci sera créé.
copycopy.gifLe pointeur indique que quelque chose devra être copié.
movemove.gifL'objet survolé devra être déplacé.
no-drop + no-drop.gif + + Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. + bug 275173 + pour Windows et Mac OS X, « no-drop a le même effet que + not-allowed ». +
grabgrab.gif +

+ Le pointeur indique que le contenu peut être accroché/attrapé ou est + accroché/attrapé pour être glissé et déposé quelque part. +

+
grabbinggrabbing.gif
not-allowednot-allowed.gifLe curseur indique que quelque chose ne peut pas être fait.
+ Redimensionnement & défilement + all-scrollall-scroll.gif + Le curseur indique qu'on peut faire défiler le contenu dans n'importe + quelle direction. + Bug 275174 + pour Windows, « all-scroll a le même effet que + move". +
col-resizecol-resize.gifL'élément ou la colonne peut être redimensionné horizontalement.
row-resizerow-resize.gifL'élément ou la ligne peut être redimensionné verticalement.
n-resize + Exemple de redimensionnement vers le haut + +

+ Un bord peut être déplacé. Par exemple, le curseur + se-resize peut être utilisé lorsqu'on redimensionne une + boîte à partir de son coin sud-est. +

+

+ Dans certains environnements, un curseur bidirectionnel équivalent est + affiché (ex. n-resize et s-resize sont + synonymes de ns-resize). +

+
e-resize + Example of a resize towards the right cursor +
s-resize + Example of a resize towards the bottom cursor +
w-resize + Example of a resize towards the left cursor +
ne-resize + Example of a resize towards the top-right corner cursor +
nw-resize + Example of a resize towards the top-left corner cursor +
se-resize + Example of a resize towards the bottom-right corner cursor +
sw-resize + Example of a resize towards the bottom-left corner cursor +
ew-resize3-resize.gif + Le pointeur indique un redimensionnement bidirectionnel. +
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.

+
zoom-outzoom-out.gif
+ +### Syntaxe formelle {{csssyntax}} -

Notes d'utilisation

+## Notes d'utilisation -

Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.

+Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées. -

Pour plus d'informations, voir le tableau de compatibilité ci-après.

+Pour plus d'informations, voir le tableau de compatibilité ci-après. -

Exemples

+## Exemples -

CSS

+### CSS -
.toto {
+```css
+.toto {
   cursor: crosshair;
 }
 
@@ -281,56 +386,39 @@ cursor: unset;
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
 }
-
+``` -

HTML

+### HTML -
<p class="toto">
+```html
+

   On dirait qu'on pourrait sélectionner une zone.
-</p>
+

 
-<p class="truc">
+

   Et là on peut zoomer.
-</p>
- -

Résultat

- -

{{EmbedLiveSample("examples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -
{{Compat}}
- -

Voir aussi

- - +

+``` + +### Résultat + +{{EmbedLiveSample("examples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- | +| {{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}} | {{Spec2('CSS3 Basic UI')}} | Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour `url()`. | +| {{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Utiliser des valeurs URL pour `cursor`](/fr/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) +- [`pointer-events`](/fr/docs/Web/CSS/pointer-events) +- La fonction CSS {{cssxref("url()", "url()")}} -- cgit v1.2.3-54-g00ecf