From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../html/howto/use_data_attributes/index.html | 82 ++++++++++++++++++++++ .../learn/html/howto/uso_attributi_data/index.html | 82 ---------------------- 2 files changed, 82 insertions(+), 82 deletions(-) create mode 100644 files/it/learn/html/howto/use_data_attributes/index.html delete mode 100644 files/it/learn/html/howto/uso_attributi_data/index.html (limited to 'files/it/learn/html/howto') diff --git a/files/it/learn/html/howto/use_data_attributes/index.html b/files/it/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: Uso degli attributi data +slug: Learn/HTML/Howto/Uso_attributi_data +tags: + - Attributi Di Dati Personalizzati + - Esempi + - Guide + - HTML + - HTML5 + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintassi HTML

+ +

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Accesso mediante JavaScript

+ +

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

+ +

Accesso mediante CSS

+ +

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

+ +

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

+ +

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

+ +

Problemi

+ +

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

+ +

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

+ +

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

+ +

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

+ +

Vedi anche

+ + diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html deleted file mode 100644 index f256a42aaf..0000000000 --- a/files/it/learn/html/howto/uso_attributi_data/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Uso degli attributi data -slug: Learn/HTML/Howto/Uso_attributi_data -tags: - - Attributi Di Dati Personalizzati - - Esempi - - Guide - - HTML - - HTML5 - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

- -

Sintassi HTML

- -

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Accesso mediante JavaScript

- -

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

- -

Accesso mediante CSS

- -

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

- -

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

- -

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

- -

Problemi

- -

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

- -

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

- -

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

- -

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

- -

Vedi anche

- - -- cgit v1.2.3-54-g00ecf