unslug it: move

1 files changed, 82 insertions, 0 deletions

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
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> è 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 <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code>attributes</a> 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()")}}.</p>
+
+<h2 id="Sintassi_HTML">Sintassi HTML</h2>
+
+<p>La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con <code>data-</code> è 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 <code>data</code> per ottenere ciò:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Accesso_mediante_JavaScript">Accesso mediante JavaScript</h2>
+
+<p>Accedere ai valori di questi attributi mediante <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> è 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")}}.</p>
+
+<p>Per ottenere un attributo <code>data</code> attraverso l'oggetto <code>dataset</code>, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo <code>data-</code> (notare che i trattini vengono converti in camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare <code>article.dataset.columns = 5</code> cambierebbe il valore dell'attributo a <code>"5"</code>.</p>
+
+<h2 id="Accesso_mediante_CSS">Accesso mediante CSS</h2>
+
+<p>E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">contenuti generati</a> in CSS con la funzione {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>E' possibile anche utilizzare i <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">selettori d'attributi</a> in CSS  per cambiare lo stile in base ai dati:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>E' possibile vedere tutto ciò all'opera <a href="http://jsbin.com/ujiday/2/edit">in questo esempio JSBin</a>. </p>
+
+<p>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 <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">questo screencast</a> per vedere un esempio che utilizza contenuti generati e transizioni CSS  (<a href="http://jsbin.com/atawaz/3/edit">esempio JSBin</a>).</p>
+
+<p>I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.</p>
+
+<h2 id="Problemi">Problemi</h2>
+
+<p>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.</p>
+
+<p>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 <a href="http://caniuse.com/#feat=dataset">non supportano <code>dataset</code></a>. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. <span id="result_box" lang="it"><span>Inoltre, le</span></span> <a href="http://jsperf.com/data-dataset">prestazioni di lettura degli attributi data</a> <span lang="it"><span>rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse.</span></span> Inoltre, la <a href="http://jsperf.com/data-dataset">performance di lettura degli attributi data</a> comparata alla memorizzazione in un oggetto JavaScript è bassa.</p>
+
+<p>Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.</p>
+
+<p>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).</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Questo articolo è stato adattato da <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li>Gli attributi personalizzati sono supportati anche da SVG 2; vedi {{domxref("SVGElement.dataset")}} e {{SVGAttr("data-*")}} per ulteriori informazioni.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>