From a45290ddbe6d11c309d308048cdf8aca8e0891ef Mon Sep 17 00:00:00 2001 From: Stebenwolf <51078231+stebenwolf@users.noreply.github.com> Date: Mon, 17 May 2021 20:09:35 +0200 Subject: [FIX] Issue #874 (#897) * [FIX] Issue #874 * fix issue 874 * Review - fix flaws / ids / macros / new bcd Co-authored-by: julieng --- files/fr/web/css/cursor/index.html | 137 +++++++++++++++++++------------------ 1 file changed, 70 insertions(+), 67 deletions(-) (limited to 'files/fr') diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html index 90d59cb8b4..a413586854 100644 --- a/files/fr/web/css/cursor/index.html +++ b/files/fr/web/css/cursor/index.html @@ -2,10 +2,18 @@ title: cursor slug: Web/CSS/cursor tags: + - Arrow - CSS - - Propriété + - CSS Property + - Cursor + - Custom Cursor - Reference + - UI + - mouse + - pointer + - recipe:css-property translation_of: Web/CSS/cursor +browser-compat: css.properties.cursor ---
{{CSSRef}}
@@ -13,9 +21,7 @@ translation_of: Web/CSS/cursor
{{EmbedInteractiveExample("pages/css/cursor.html")}}
- - -

Syntaxe

+

Syntaxe

/* Valeurs avec un mot-clé */
 cursor: pointer;
@@ -34,33 +40,35 @@ cursor: initial;
 cursor: unset;
-

La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <uri> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <uri> 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.

+

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 <uri> 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.

+

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 <uri> 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 :

+

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

+

Valeurs

-
<uri>
-
Une url(…) ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes {{cssxref("<uri>")}} en cas de recours si 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}}
+
<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é
+
Valeurs utilisant un mot-clé

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

- + + + @@ -69,7 +77,7 @@ cursor: unset; - + @@ -80,109 +88,106 @@ cursor: unset; - - + + - + - + - + - + - - + + - + - + - + - + - + - + - - + + - + - + - + - - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
Catégorie Valeur CSS Rendu Description
Général auto
defaultdefault.gifdefault.gif Le curseur par défaut de la plateforme (qui est généralement une flèche).
Liens & états context-menucontext-menu.pngUn menu contextuel est disponible sous le curseur. Seul
- IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : {{Bug("258960")}}.		context-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.gifhelp.gif Le pointeur indique qu'une aide est disponible.
pointerpointer.gifpointer.gif Le curseur est un pointeur qui indique un lien ; généralement c'est une main.
progressprogress.gifprogress.gif Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
waitwait.gifwait.gif Le programme est occupé, empêchant toute interaction.
Sélection cellcell.gifLe pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.cell.gifLe pointeur indique que la ou les cellules du tableau peuvent être sélectionnées.
crosshaircrosshair.gifcrosshair.gif Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
texttext.giftext.gif Le pointeur indique que le texte peut être sélectionné.
vertical-textvertical-text.gifvertical-text.gif Le pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposer aliasalias.gifalias.gif Le pointeur indique qu'un alias ou qu'un raccourci sera créé.
copycopy.gifcopy.gif Le pointeur indique que quelque chose devra être copié.
movemove.gifmove.gif L'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 ».		no-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.gifgrab.gif

Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.
grabbinggrabbing.gifgrabbing.gif
not-allowednot-allowed.gifnot-allowed.gif Le curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilement all-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".		all-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.gifcol-resize.gif L'élément ou la colonne peut être redimensionné horizontalement.
row-resizerow-resize.gifrow-resize.gif L'élément ou la ligne peut être redimensionné verticalement.
n-resizeExample of a resize towards the top cursorExemple 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.

@@ -191,77 +196,77 @@ cursor: unset;
e-resizeExample of a resize towards the right cursorExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor Example of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursorExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursorExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursorExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursorExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursorExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gif3-resize.gif Le pointeur indique un redimensionnement bidirectionnel.
ns-resize6-resize.gif6-resize.gif
nesw-resize1-resize.gif1-resize.gif
nwse-resize4-resize.gif4-resize.gif
Zoom zoom-inzoom-in.gifzoom-in.gif

Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.
zoom-outzoom-out.gifzoom-out.gif
-

Syntaxe formelle

+

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.

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

-

Exemples

+

Exemples

CSS

@@ -288,11 +293,11 @@ cursor: unset; Et là on peut zoomer. </p> -

Résultat

+

Résultat

-

{{EmbedLiveSample("Exemples")}}

+

{{EmbedLiveSample("examples")}}

-

Spécifications

+

Spécifications

@@ -318,16 +323,14 @@ cursor: unset;

{{cssinfo}}

-

Compatibilité des navigateurs

- - +

Compatibilité des navigateurs

-

{{Compat("css.properties.cursor")}}

+
{{Compat}}
-

Voir aussi

+

Voir aussi

-- cgit v1.2.3-54-g00ecf