Contenuti generati e progressive enhancement in Internet Explorer

In questo articolo vedremo lo stato attuale del supporto dei contenuti generati in Safari 3.1.2/Win, Chrome 0.2.149.30/Win, Opera 9.5/Win, Firefox 3.1/Win e infine Internet Explorer 5.5/6/7 (di sistema), grazie ad un componente htc appositamente sviluppato.

I contenuti generati, definiti già a partire dalla versione 2.1 dei CSS, rappresentano una possibilità per aumentare l’usabilità delle pagine web. Attraverso questi è possibile ad esempio aggiungere una numerazione progressiva ad una serie di titoli, inserire elementi semantici sulle voci di una lista, appendere l’attributo di un elemento in coda (il nome dell’autore dopo una citazione, un testo alternativo dopo un’immagine…), includere un file audio con il testo parlato di un paragrafo e così via.

Per una loro trattazione esauriente in italiano si rimanda alla relativa traduzione su diodati.org.

Sebbene le specifiche che riguardano questi contenuti siano già disponibili da diversi anni, il loro reale supporto nei browser più moderni non è però completo, sebbene – come vedremo – alcuni di essi (Opera in modo particolare) si avvicinano molto ad una corretta implementazione dello standard in questione.

Ciò che forse attualmente impedisce di fatto l’uso dei “generated contents" può essere la totale mancanza di supporto alle pseudoclassi after e before da parte di Internet Explorer, lacuna che verrà colmata al rilascio della prossima versione 8.

Questi browser ancora oggi largamente utilizzati, rappresenterebbero quindi un ostacolo concreto ad un “progressive enhancement" dei nostri contenuti. Tuttavia è possibile aggirare tale limitazione attraverso un componente htc (scritto in Javascript) che, collegato ad una pagina attraverso la proprietà CSS “behavior", consente l’esecuzione del codice descritto nel componente quando il parser incontra l’elemento in cui la proprietà stessa è definita.

È bene precisare fin da subito che questo componente, per natura del suo funzionamento non può garantire prestazioni performanti soprattutto al crescere del contenuto da integrare: il suo unico scopo è quello di fornire un modo semplice per garantire un più che discreto uso delle proprietà che analizzeremo in dettaglio.

Come funziona in Internet Explorer

Non disponendo delle pseudoclassi after e before in IE, dovremo ricorrere a due proprietà create ad hoc, incluse tramite commenti condizionali: msie-after-content e msie-before-content. Se ad esempio volessimo aggiungere l’attributo href in coda ad un link, nei browser più moderni scriveremo

a:after {
   content: " [" attr(href) “] ";
}

mentre in Internet Explorer, con questo componente, scriveremo

 <!—[if lte IE 7]>
        <style type="text/css">
        a {
            behavior            : url(“generated-contents.htc");
               msie-after-content  : " [" attr(href) “] ";
        }
        </style>
<![endif]—>

come nella seguente demo.

Il codice Javascript al suo interno viene eseguito non appena si conclude il caricamento dell’intero documento (ondocumentready). Non è stato possibile inserire i contenuti generati all’evento oncontentready poiché l’evento sembrava non attendere il completo caricamento di alcuni elementi, tra cui le liste annidate <ol> e <ul>.

Le due proprietà msie-after-content e msie-before-content vengono quindi analizzate e scomposte da un parser in sottostringhe che corrisponderanno ad uno o più valori ammessi (nel caso del link: una stringa “[”, un attributo e un’altra stringa “]”), quindi inseriti nello specifico elemento (in testa o in coda) attraverso il metodo innerHTML.

Da questo punto di vista lo script non può essere “unobtrusive”, poiché la struttura della pagina viene modificata (cosa che invece non succede quando si usano le relative proprietà standard fornite dai CSS) inserendo testi, immagini e objects.

Analoghe proprietà msie-quotes, msie-counter-reset e msie-counter-increment sono state definite al fine di emulare le corrispondenti proprietà standard quotes, counter-reset e counter-increment.

La proprietà quotes

"Quotes" è una proprietà che consente di definire una o più coppie di virgolette che saranno poi visualizzate con i valori "open-quote" e "close-quote" della proprietà content. Applicata ad un elemento, la prima coppia ne delimiterà inizio e fine. Le coppie successive racchiuderanno eventuali elementi annidati. Qualora ci fossero più elementi annidati che coppie definite, gli annidamenti successivi useranno l'ultima coppia di virgolette disponibile. Demo 02.

La proprietà content

Una stringa del tipo “abc123”. Questo tipo di valore è rappresentato correttamente in tutti i browser testati e anche su IE con inclusione del file htc. Demo 03.

L’indirizzo di una risorsa esterna. Se lo user-agent non supporta un determinato tipo di media, deve ignorare la
richiesta. Allo stato attuale i 4 browser sembrano supportare solo l’inclusione di file immagini .gif, .png e .jpeg. Il componente .htc fornisce invece anche la possibilità di inserire file audio .wav, aggiungendo dinamicamente un elemento <img> o <object>. Qualora la risorsa non esistesse il nodo verrebbe subito eliminato: demo 04.

Come già visto nell’esempio iniziale, la funzione attr() riporta il valore dell’attributo <attribute> dell’elemento a cui la regola viene applicata. È una funzione supportata sia dai browser testati che da IE ad eccezione dell’attributo style in linea. Demo 01.

È il nome di una o più variabili contatore per la generazione automatica degli indici. L’unico browser che sembra implementare correttamente i contatori è Opera. Firefox, Safari e Chrome non numerano correttamente i vari indici. Le specifiche consentono di definire anche un sistema di numerazione (latino, romano, hiragana…) mentre nel componente per IE è stato implementato il solo sistema decimale (lo script però può essere esteso per sistemi diversi). L’unico browser che visualizza quindi correttamente la seguente demo è Opera (ed Explorer). Demo 05.

A differenza della funzione counter, questa ci permette la generazione di indici in elementi che possono essere anche annidati tra loro, come ad esempio i list-items <li>. In questo caso infatti, se non si conosce a priori il livello di annidamento della lista potrebbe non essere semplice creare dei contatori nominati per ciascun livello.

La variabile definita da questa funzione viene istanziata dalla proprietà counter-reset applicata ad una lista <ol> o <ul>, creando di fatto una nuova istanza dello stesso contatore il cui ambito di visibilità è la lista stessa. il parametro stringa dà la possibilità di definire un sepratore (punto, virgola, trattino…) per separare i vari livelli di numerazione.

Countersè implementato correttamente nei quattro browser testati e in IE. Demo 06.

Questi valori vengono sostituiti dalla proprietà quotes che definisce una coppia di virgolette (o più coppie in caso di elementi annidati). Demo 02.

Questi valori permettono di specificare che per un determinato elemento non debbano essere inserite le virgolette previste per lo specifico livello di annidamento. Di fatto è sufficiente non specificare l’apertura dei quote su IE per l’elemento.

Le proprietà counter-reset e counter-increment

Queste proprietà consentono rispettivamente di resettare e incrementare uno o più contatori per il loro utilizzo con counter() o counters(). Se non specificato da un <valore>, il reset riporta sempre il contatore a zero mentre l'incremento è pari a uno. È possibile agire su più contatori, ad esempio con i CSS:

counter-increment: sezione 3 capitolo sottocapitolo 2

Con il componente per IE, il comportamento analogo

msie-counter-increment: sezione 3 capitolo sottocapitolo 2

Entrambe le dichiarazione aumenteranno il contatore <sezione> di 3, <capitolo> di 1 e <sottocapitolo> di 2.
Demo 07.

Tutte le demo sono disponibili per il download.

Conclusioni

Abbiamo visto come poter utilizzare alcune utili proprietà per aumentare in modo semplice il grado di fruizione della nostra pagina anche con le versioni più datate di IE la cui dismissione appare ancora lontana.

Sebbene le specifiche prevista dai CSS2.1 siano molto più complesse ed articolate di quanto trattato dal seguente articolo è bene conoscere alcune delle proprietà che useremo di certo con più frequenza in un futuro ormai vicino.