Revision 321245 of Dare una mano al puntatore

  • Slug della versione: Dare_una_mano_al_puntatore
  • Titolo della versione: Dare una mano al puntatore
  • ID versione: 321245
  • Data di creazione
  • Autore: ethertank
  • Versione corrente? No
  • Commento
Etichette: 

Contenuto della versione

Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà cursor. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.

Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore hand, che non appare mai nella sezione 18.1 dei CSS2– ne' in altra specifica. Il valore che più si avvicina al comportamento di hand è pointer, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.

Sfortunatamente, IE5.x/Win non riconosce il valore pointer. Entrambi IE6/Win and IE5.x/Mac riconoscono pointer e hand, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono pointer, ignorando il valore proprietario hand.

Se Mozilla/Netscape ignorano hand e IE5.x/Win ignora pointer, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.

a { cursor: pointer; cursor: hand; }

Si faccia attenzione a non invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore pointer. IE5.x/Win riconosce entrambi ed userà il secondo, cioè hand. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.

Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.

Una avvertenza: seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà cursor. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.

Testare il supporto

Vi chiedete come si comporti il vostro browser con hand e pointer? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!

Questa cella ha lo stile cursor: pointer. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win. Questa cella non ha uno stile cursor per cui il puntatore rimarrà quello standard. Questa cella ha uno stile cursor: hand. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.

Collegamenti

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Sorgente della versione

<!--Summary: Netscape 6 and Mozilla support cursor quite nicely, but that's not true of some other browsers. Happily, there's a fix. Find out how to get a hand from multiple browsers when you use this property.-->
<p>Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà <code>cursor</code>. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.</p>
<p>Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore <code>hand</code>, che non appare mai nella <a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">sezione 18.1 dei CSS2</a>– ne' in altra specifica. Il valore che più si avvicina al comportamento di <code>hand</code> è <code>pointer</code>, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.</p>
<p>Sfortunatamente, IE5.x/Win non riconosce il valore <code>pointer</code>. Entrambi IE6/Win and IE5.x/Mac riconoscono <code>pointer</code> e <code>hand</code>, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono <code>pointer</code>, ignorando il valore proprietario <code>hand</code>.</p>
<p>Se Mozilla/Netscape ignorano <code>hand</code> e IE5.x/Win ignora <code>pointer</code>, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.</p>
<pre>
a { cursor: pointer; cursor: hand; }</pre>
<p>Si faccia attenzione a <b>non</b> invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore <code>pointer</code>. IE5.x/Win riconosce entrambi ed userà il secondo, cioè <code>hand</code>. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.</p>
<p>Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.</p>
<p><b>Una avvertenza:</b> seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà <code>cursor</code>. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.</p>
<h2 id="Testare_il_supporto" name="Testare_il_supporto">Testare il supporto</h2>
<p>Vi chiedete come si comporti il vostro browser con <code>hand</code> e <code>pointer</code>? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!</p>
<table class="standard-table">
  <tbody>
    <tr>
      <td style="cursor: pointer;">Questa cella ha lo stile <code>cursor: pointer</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.</td>
      <td>Questa cella non ha uno stile <code>cursor</code> per cui il puntatore rimarrà quello standard.</td>
      <td style="cursor: hand;">Questa cella ha uno stile <code>cursor: hand</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.</td>
    </tr>
  </tbody>
</table>
<h2 id="Collegamenti" name="Collegamenti">Collegamenti</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">CSS2, sezione 18.1</a></li>
</ul>
<div class="originaldocinfo">
  <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
  <ul>
    <li>Author(s): Eric A. Meyer, Netscape Communications</li>
    <li>Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003</li>
    <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
    <li>Note: This reprinted article was originally part of the DevEdge site.</li>
  </ul>
</div>
<!-- languages({
	"en": "en/Giving_\'cursor\'_a_Hand",
	"pl": "pl/Podaj_D?on\'_\'kursorowi\'"
}) -->
Ripristina questa versione