HTML5 Attributi globali

Di attributi globali (quelli cioè che si possono applicare a tutti gli elementi HTML) ce ne sono sempre stati: basti pensare al classico ‘id’, disponibile da sempre sulla totalità degli elementi. HTML5 formalizza questa definizione e arricchisce lo sparuto gruppo con nuovi membri che, come intuibile, possono essere applicati a un qualsiasi tag di queste specifiche. In questo capitolo dedicheremo qualche paragrafo ad ognuno dei nuovi arrivati, alcuni dei quali, vedrete, sono decisamente interessanti.

Modificare il contenuto di una pagina: contenteditable

TinyMCE, CKEditor e WYMeditor sono solo tre di una lunga lista di librerie studiate per offrire uno strumento di editing testuale su web che superi le classiche textarea. I risultati sono già ad oggi eccellenti, vicini a prodotti desktop come Microsoft Word, ma le soluzioni implementate fanno tutte uso di escamotage più o meno furbi per ottenere questo livello di interazione in quanto l’HTML 4 non prevede alcun modo esplicito di generare controlli del genere.

Durante la stesura delle specifiche HTML5 questo problema è stato affrontato e si è deciso di sviluppare un approccio comune al rich-editing di un documento re-introducendo un set di specifiche implementate in sordina da Microsoft nella versione 5.5 di Internet Explorer. Questo lavoro ha portato alla creazione di un nuovo attributo globale: contenteditable, che impostato a true su di un qualsiasi elemento lo rende modificabile da browser; lo stesso destino subiscono tutti gli elementi in esso contenuti a meno che non espongano un esplicito contenteditable=false.

Ma... cosa significa esattamente modificabile da browser? Che tipo di feedback visivo ci si dovrebbe aspettare? E come si comporterebbe il markup a fronte delle modifiche? Sfortunatamente qui le specifiche non sono troppo chiare e sanciscono semplicemente che qualsiasi cosa venga concessa all’utente il risultato deve comunque restare conforme all’HTML5: questa libertà operativa ha prodotto comportamenti diversi da browser a browser; ad esempio c’è chi traduce il tasto invio com un <br> e chi invece crea un nuovo paragrafo con <p>. Parallelamente è disponibile anche un set di API utilissime per insistere sulla zona modificabile con comandi attivati dall’esterno, come ad esempio da una toolbar. Un pulsante che volesse attivare/disattivare il grassetto sulla selezione corrente dovrebbe invocare la seguente funzione:

1
document.execCommand('bold')

Prima di passare oltre sappiate che l’attributo contenteditable è stato applicato con valore true a all’intera sezione precedente con l’esclusione di questo paragrafo, permettendovi così di editarla e sperimentare l’interazione di questa nuova interessante caratteristica! (e se selezionate del testo e cliccate qui, potrete renderlo grassetto!).

Menu contestuali associati ad un elemento: contextmenu

L’attributo globale contextmenu serve ad associare a un elemento un menu contestuale; questa forma di interazione è poco comune sul web ma molto praticata sul desktop dove, ad esempio, su di una cartella di sistema ci si aspetta di poter operare azioni quali ‘copia’, ‘elimina’ e ‘rinomina’. Vediamo un esempio:

1
2
3
4
5
6
<img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg"
contextmenu="image_menu">
<menu type="context" id="image_menu">
    <command label="Modifica il contrasto" onclick="contrastDialog();">
    <command label="Negativo" onclick="negativo();">
</menu>

Cliccando con il tasto destro del mouse sull’immagine il browser dovrebbe mostrare un menu contenente le due azioni disponibili. Purtroppo ad oggi non esiste ancora nessuna implementazione funzionante di questa feature, che resta al momento relegata a semplice specifica.

Lʼattributo data-*

L’HTML5 predispone la possibilità di associare ad ogni elemento che compone la pagina un numero arbitrario di attributi il cui nome può essere definito dall’utente sulla base di esigenze personali, a patto che venga mantenuto il suffisso ‘data-’; ad esempio:

1
2
3
4
5
6
<img id="ombra"
    class="cane"
    data-cane-razza="mastino corso”
    data-cane-eta="5"
    data-cane-colore="nero"
    src="la_foto_del_mio_cane.jpg">

È inoltre interessante notare come queste informazioni, che arricchiscono e danno valore semantico all’elemento, siano accessibili anche attraverso un comodo metodo Javascript:

1
alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");

La fine del display:none in linea: hidden

L’attributo globale hidden è stato introdotto per offrire un’alternativa all’utilizzo del predicato ‘style="display:none"’ che ha subito una proliferazione incontrollata soprattutto a seguito della diffusione di librerie Javascript come jQuery o Prototype. Un elemento marcato come hidden deve essere considerato dallo user agent come non rilevante e quindi non visualizzato a schermo.

Spellcheck

La quasi totalità dei browser oggi in commercio contiene un motore di verifica della sintassi grammaticale. Le specifiche HTML5 introducono un meccanismo per abilitare o disabilitare il controllo della sintassi su porzioni della pagina modificabili dall’utente. L’attributo in questione si chiama spellcheck e, quando impostato a true, ordina al browser di attivare il proprio correttore sull’elemento corrente e su tutti i suoi figli.

Laddove invece non venga impostata nessuna preferenza, le specifiche prevedono che il browser utilizzi un proprio comportamento di default.

Altri attributi globali

Ci sono un paio di altri attributi globali introdotti dalle specifiche e non trattati in questa sede, draggable e aria-*; entrambi sottendono un discorso che si estende ben al di là della semplice implementazione di markup e verranno trattati più avanti nella guida.

Ecco comunque la lista di tutti gli attributi globali previsti dalla specifica:

1
2
accesskey, class, contenteditable, contextmenu, dir, draggable
hidden, id, lang, spellcheck, style, tabindex, title

Conclusioni

In questa lezione abbiamo appreso che la nuova configurazione di markup dell’HTML5 è stata studiata per ovviare a tutti i problemi emersi in anni sviluppo di siti web e applicazioni con la precedente versione delle specifiche. Nelle prossime lezione introdurremo il nuovo content model, pensato non più nella forma binaria ‘block’ e ‘inline’ ma articolato in una serie di modelli di comportamento complessi ed interessanti.