From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/css/cursor/index.html | 388 +++++++++++++++++++++ .../index.html" | 40 +++ 2 files changed, 428 insertions(+) create mode 100644 files/it/web/css/cursor/index.html create mode 100644 "files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" (limited to 'files/it/web/css/cursor') diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
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.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + diff --git "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" @@ -0,0 +1,40 @@ +--- +title: Usare valori URL per la proprietà cursor +slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +tags: + - CSS + - CSS_2.1 + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

+

Sintassi

+

La sintassi per questa proprietà è:

+
cursor: [<url>,]* keyword;
+
+

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

+

Ad esempio, la scrittura seguente è corretta:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su auto.

+

il supporto della sintassi CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:

+
cursor: url(foo.png) 4 12, auto;
+
+

Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).

+

Limitazioni

+

Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.

+


+ Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).

+

Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.

+

Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilità con altri browsers

+

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

+

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

+
cursor: url(foo.cur);
+
+

che:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.

-- cgit v1.2.3-54-g00ecf