No. 207

Titolo originale: Radio-Controlled Web Design

Pubblicato in: CSS, HTML, JavaScript

Scritto da Art Lawry

Nel nostro mondo responsive le interfacce utente interattive sono una necessità. Gli schermi più piccoli vincolano la quantità di contenuto che può essere mostrata in un certo momento, quindi abbiamo bisogno di tecniche che tolgano di mezzo la navigazione e le informazioni secondarie fino a quando non diventano necessarie. Abbiamo creato molti design pattern efficaci, dai tab ai modal overlay per nascondere la navigazione, che mostrano e nascondono il contenuto usando JavaScript.

Tuttavia, anche JavaScript pone delle problematiche su mobile: gran variabilità di velocità di rete e di piani dati fanno sì ogni byte che inviamo abbia un impatto sulla velocità di visualizzazione delle nostre pagine o applicazioni. Quando aggiungiamo JavaScript ad una pagina, tipicamente usiamo un file JavaScript esterno e opzionalmente una libreria (solitamente grande) come jQuery. Queste interfacce non saranno utilizzabili fino a che tutto il contenuto, files JavaScript inclusi, non sarà scaricato, creando una prima lenta e fiacca impressione negli utenti.

Se potessimo creare questi pattern per il "contenuto on demand" senza dover dipendere da JavaScript, le interfacce si caricherebbero più rapidamente e gli utenti potrebbero interagire con loro non appena diventano visibili. Spostando parte della funzionalità in CSS, potremmo anche ridurre la quantità di JavaScript necessario per mostrare il resto della nostra pagina. Il risultato sarebbe un file di dimensioni minori, tempi di caricamento della pagina più rapidi, interfacce disponibili prima pur mantenendo la stessa funzionalità dei design pattern a cui siamo abituati.

In questo articolo, esplorerò una tecnica su cui sto lavorando che fa proprio questo. È ancora un po' sperimentale, quindi valutate davvero bene se usarla nei vostri ambienti di produzione.

Comprendiamo il ruolo di JavaScript nel mantenere lo stato

Per capire in che modo possiamo ottenere questi design pattern senza usare JavaScript, esaminiamo prima il ruolo giocato da JavaScript nel mantenere lo stato per una semplice interfaccia a tab.

Guarda la demo su Codepen: Esempio Show/hide (JavaScript Tabs - No ARIA)

Diamo un'occhiata più nel dettaglio al codice sottostante.

<div class="js-tabs">

    <div class="tabs">
        <a href="#starks-panel" id="starks-tab"
            class="tab active">Starks</a>
        <a href="#lannisters-panel" id="lannisters-tab"
            class="tab">Lannisters</a>
        <a href="#targaryens-panel" id="targaryens-tab"
            class="tab">Targaryens</a>
    </div>

    <div class="panels">
        <ul id="starks-panel" class="panel active">
            <li>Eddard</li>
            <li>Caitelyn</li>
            <li>Robb</li>
            <li>Sansa</li>
            <li>Brandon</li>
            <li>Arya</li>
            <li>Rickon</li>
        </ul>
        <ul id="lannisters-panel" class="panel">
            <li>Tywin</li>
            <li>Cersei</li>
            <li>Jamie</li>
            <li>Tyrion</li>
        </ul>
        <ul id="targaryens-panel" class="panel">
            <li>Viserys</li>
            <li>Daenerys</li>
        </ul>
    </div>

</div>

Nulla di strano nel layout, solo un insieme di tab e dei corrispondenti pannelli (panel) che verranno mostrati quando si seleziona un tab. Diamo ora un'occhiata al modo in cui viene gestito lo stato del tab alterandone la class.

...

.js-tabs .tab {
    /* inactive styles go here */
}
.js-tabs .tab.active {
    /* active styles go here */
}

.js-tabs .panel {
    /* inactive styles go here */
}
.js-tabs .panel.active {
    /* active styles go here */
}

...

I tab e i panel che hanno una class "active" avranno delle ulteriori regole CSS applicate per evidenziarli. Nel nostro caso, i tab "active" saranno collegati visivamente al loro contenuto mentre i tab non attivi rimarranno separati, i panel attivi saranno visibili mentre quelli inattivi rimarranno nascosti.

A questo punto, usereste il vostro metodo di lavoro JavaScript preferito per ascoltare i "click event" sulle tab, poi manipolereste la class active, rimuovendola da tutti i tab e panel, aggiungendola al tab appena cliccato e al corrispondente panel. Questo pattern è piuttosto flessibile e ha funzionato bene per molto tempo. Possiamo semplificare quello che succede in due parti distinte:

  1. JavaScript fa il bind degli eventi che manipolano le classi.
  2. CSS crea un nuovo stile per gli elementi basati su quelle classi.

Gestione dello stato senza JavaScript

Cercare di replicare il binding degli eventi e la manipolazione delle classi solo in HTML e CSS sarebbe impossibile, ma se definiamo il processo in termini più ampi, diventa:

  1. L'input da parte dell'utente cambia lo stato attivo del sistema.
  2. Il sistema viene visualizzato nuovamente quando cambia lo stato.

Nella nostra soluzione costituita solo da HTML e CSS, useremo i radio button per permettere all'utente di manipolare lo stato e la pseudo-classe :checked come hook per ri-visualizzare.

Questa soluzione ha le sue radici nel checkbox hack di Chris Coyier, che mi fu presentato dal mio collega Scott O'Hara con la sua demo del morphing menu button. In entrambe i casi, i checkbox input vengono usati per mantenere due stati senza JavaScript e assegnare gli stili agli elementi con la pseudo-classe :checked. In questo caso, userò i radio button per poter mantenere più di due stati.

Cosa? I radio button?

Utilizzare i radio button per fare qualcosa che non sia la raccolta di dati inviati tramite form potrebbe far sentire a disagio più di una persona, ma diamo un'occhiata a quello che dice il W3C sull'uso degli input e vediamo se possiamo sciogliere qualche dubbio:

L'elemento <input> rappresenta un campo dati inseriti via computer, solitamente con un form control per permettere all'utente di modificare i dati. (L'enfasi è mia).

"Dati" è un termine piuttosto generico e deve esserlo per coprire la moltitudine di tipi di dati che vengono raccolti dalle form. Permettiamo all'utente di modificare lo stato di una parte della pagina. Lo stato non è altro che un dato riguardante quella parte della pagina in ogni momento. Questo potrebbe non essere l'uso designato di <input>, ma siamo comunque fedeli alla specifica.

Il W3C afferma inoltre che gli input potrebbero essere resi ovunque si può usare del "contenuto di enunciazione", ossia praticamente ovunque mettereste del testo autonomo. Questo ci permette di usare i radio button al di fuori di una form.

Tab radiocomandati

Perciò, adesso che sappiamo un po' di più riguardo al poter usare i radio button per questo scopo, utilizziamo un esempio per vedere in che modo possono effettivamente rimuovere o ridurre la nostra dipendenza da JavaScript modificando il nostro esempio iniziale dei tab.

Aggiungere radio button che rappresentino lo stato

Ogni radio button rappresenterà uno stato del componente interattivo. Nel nostro caso, abbiamo tre tab e ciascun tab può essere attivo, quindi abbiamo bisogno di tre radio button, ciascuno dei quali rappresenterà un particolare tab nello stato attivo. Dando ai radio button lo stesso nome, siamo sicuri che soltanto uno potrà essere "checked" in un qualunque istante. Il nostro esempio JavaScript inizialmente aveva il primo tab attivo, quindi possiamo aggiungere l'attributo checked al radio button che rappresenta il primo tab, indicando che attualmente è attivo.

Dal momento che i selettori CSS possono solo assegnare stili ai selettori "sibling" o "child" basandosi sullo stato di un altro elemento, questi radio button devono trovarsi prima di qualunque contenuto che debba essere visivamente manipolato. Nel nostro caso, metteremo i nostri radio button proprio prima del div dei tab:

    
    <input class="state" type="radio" name="houses-state"
        id="starks" checked />
    <input class="state" type="radio" name="houses-state"
        id="lannisters" />
    <input class="state" type="radio" name="houses-state"
        id="targaryens" />

    <div class="tabs">
    ...

Sostituire le aree di click e touch con i label

I label rispondono naturalmente agli eventi click e touch. Non possiamo dire loro in che modo reagire a questi eventi, ma il comportamento è prevedibile e noi possiamo sfruttarlo. Quando si clicca o si tocca un label associato ad un radio button, questo viene contrassegnato e la spunta viene tolta da qualsiasi altro radio button dello stesso gruppo.

Impostando l'attributo for dei nostri lebel all'id di un particolare radio button, possiamo sistemare i label ovunque ne abbiamo bisogno ereditando ancora il comportamento al touch e al click.

Nell'esempio di prima, i nostri tab erano rappresentati da ancore. Sostituiamole con i label e aggiungiamo gli attributi for per collegarli ai radio button corretti. Possiamo anche eliminare la classe active da tab e panel poiché i radio button manterranno lo stato:

...
    <input class="state" type="radio" title="Targaryens"
        name="houses-state" id="targaryens" />

    <div class="tabs">
        <label for="starks" id="starks-tab"
            class="tab">Starks</label>
        <label for="lannisters" id="lannisters-tab"
            class="tab">Lannisters</label>
        <label for="targaryens" id="targaryens-tab"
            class="tab">Targaryens</label>
    </div>

    <div class="panels">
...

Nascondere i radio button con CSS

Ora che abbiamo sistemato i label, possiamo tranquillamente nascondere i radio button. Vogliamo ancora che i tab siano accessibili da tastiera, quindi spostiamo semplicemente i radio button fuori dallo schermo:

...

.radio-tabs .state {
    position: absolute;
    left: -10000px;
}

...

Assegnare stili agli stati basandosi su :checked piuttosto che .active

La pseudo-classe :checked ci permette di applicare CSS a un radio button quando è selezionato. Il selettore di "sibling" ~ ci permette di assegnare stili agli elementi che seguono un elemento allo stesso livello. Combinandoli, possiamo assegnare stili a qualunque cosa ci sia dopo i radio button basandoci sullo stato degli stessi.

Il pattern è #radio:checked ~ .something-after-radio o, opzionalmente, #radio:checked ~ .something-after-radio .something-nested-deeper:

...

.tab {
    ...
}
#starks:checked ~ .tabs #starks-tab,
#lannisters:checked ~ .tabs #lannisters-tab,
#targaryens:checked ~ .tabs #targaryens-tab {
    ...
}

.panel {
    ...
}
#starks:checked ~ .panels #starks-panel,
#lannisters:checked ~ .panels #lannisters-panel,
#targaryens:checked ~ .panels #targaryens-panel {
    ...
}

...

Ora, quando i label del tab vengono cliccati, verrà contrassegnato l'appropriato radio button, che assegnerà uno stile come se fosse active al tab e al panel corretti. Il risultato:

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Tabs - No ARIA)

Browser support

I requisiti per questa tecnica sono piuttosto pochi. Siamo a posto se un browser supporta la pseudo-classe :checked e il sibling selector ~. Firefox, Chrome e Webkit mobile supportano da sempre questi selettori. Safari ha cominciato a supportarli a partire dalla versione 3 e Opera dalla 9. Internet Explorer ha iniziato a supportare il sibling selector nella versione 7, ma non ha aggiunto il supporto per :checked fino alla IE9. Android supporta :checked ma ha un bug che gli impedisce di essere a conoscenza dei cambiamenti a un elemento contrassegnato dopo che la pagina è stata caricata.

È un supporto decente, ma con un pochino di lavoro extra possiamo far sì che anche Android e le versioni più vecchie di IE funzionino altrettanto bene.

Correggere il bug :checked di Android 2.3

In alcune versioni di Android, :checked non si aggiornerà al cambio di stato di un radio group. Fortunatamente, c'è una fix che richiede l'animazione infinita "webkit-only" sul body, mostrata da Tim Pietrusky nel suo advanced checkbox hack:

...

/* Android 2.3 :checked fix */
@keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opacity: 1
    }
}
body {        
    animation: fake 1s infinite;
}

...

JavaScript shim per le vecchie versioni di Internet Explorer

Se dovete supportare IE7 e IE8, potete aggiungere questo shim in fondo alla vostra pagina all'interno di un tag script:

document.getElementsByTagName('body')[0]
.addEventListener('change', function (e) {
    var radios, i;
    if (e.target.getAttribute('type') === 'radio') {
        radios = document.querySelectorAll('input[name="' +
            e.target.getAttribute('name') + '"]');
        for (i = 0; i < radios.length; i += 1) {
            radios[ i ].className = 
                radios[ i ].className.replace(
                    /(^|\s)checked(\s|$)/,
                    ' '
                );
            if (radios[ i ] === e.target) {
                radios[ i ].className += ' checked';
            }
        }
    }
});

Questo aggiunge una class checked al radio button attualmente contrassegnato, permettendovi di raddoppiare i selettori e mantenere il supporto. I vostri selettori dovranno essere aggiornati per includere entrambe le versioni di checked, :checked e .checked, così:

...

.tab {
    ...
}
#starks:checked ~ .tabs #starks-tab,
#starks.checked ~ .tabs #starks-tab,
#lannisters:checked ~ .tabs #lannisters-tab,
#lannisters.checked ~ .tabs #lannisters-tab,
#targaryens:checked ~ .tabs #targaryens-tab,
#targaryens.checked ~ .tabs #targaryens-tab {
    ...
}

.panel {
    ...
}
#starks:checked ~ .panels #starks-panel,
#starks.checked ~ .panels #starks-panel,
#lannisters:checked ~ .panels #lannisters-panel,
#lannisters.checked ~ .panels #lannisters-panel,
#targaryens:checked ~ .panels #targaryens-panel,
#targaryens.checked ~ .panels #targaryens-panel {
    ...
}

...

Usare uno script inline ci fa inoltre risparmiare una potenziale richiesta http e accelera le interazioni nei browser più nuovi. Quando scegliete di non supportare IE7 e IE8, potete eliminare lo shim senza cambiare alcuna parte del vostro codice.

Mantenere l'accessibilità

Mentre i nostri tab JavaScript inizialmente mostravano la gestione dello stato tra tab che cambiano, un esempio più robusto dovrebbe utilizzare il progressive enhancement per cambiare tre liste con il titolo in tab. Dovrebbe anche gestire l'aggiunta di tutti gli ARIA roles e gli attributi che lo screen reader e altre tecnologie assistive usano per navigare i contenuti di una pagina. Un migliore esempio JavaScript potrebbe essere questo:

Guarda la demo su Codepen: Esempio show/hide (JavaScript Tabs - ARIA)

Parti di HTML vengono rimosse e saranno ora aggiunte con dell'altro JavaScript; è stato aggiunto del nuovo HTML che verrà nascosto con del JavaScript in più. È stato inoltre aggiunto un nuovo CSS per gestire gli stati pre-enhanced e post-enhanced. In generale, il nostro codice è aumentato di un bel po'.

Per supportare ARIA, in particolar modo per gestire lo stato aria-selected, dovremo rimettere del JavaScript nei tab radio-comandati. Tuttavia, la quantità di progressive enhancement che dobbiamo fare è enormemente ridotta.

Se non avete familiarità con ARIA o siete un po' arrugginiti, potreste far riferimento alle ARIA Authoring Practices per tabpanel.

Aggiungere gli ARIA roles e attributes

Per prima cosa, aggiungeremo il ruolo di tablist al div contenitore.

<div class="radio-tabs" role="tablist">
  
    <input class="state" type="radio" name="houses-state"
        id="starks" checked />
    ...

Poi, aggiungeremo il ruolo di tab e l'attributo aria-controls a ciascun radio button. Il valore di aria-controls sarà l'id del corrispondente panel da mostrare. Inoltre, aggiungeremo i title ad ogni radio button, così che gli screen reader possano associare un label ad ogni tab. Il radio button contrassegnato avrà anche aria-selected="true":

<div class="radio-tabs" role="tablist">
  
    <input class="state" type="radio" title="Starks"
        name="houses-state" id="starks" role="tab"
        aria-controls="starks-panel" aria-selected="true"checked />
    <input class="state" type="radio" title="Lanisters" 
        name="houses-state" id="lannisters" role="tab" 
        aria-controls="lannisters-panel" />
    <input class="state" type="radio" title="Targaryens" 
        name="houses-state" id="targaryens" role="tab" 
        aria-controls="targaryens-panel" />

    <div class="tabs">

Nasconderemo i tab visuali dalla tecnologia assistiva perché sono futili interfacce per i veri tab (i radio button). Facciamo ciò aggiungendo aria-hidden="true" al nostro div .tabs:

    ...
    <input class="state" type="radio" title="Targaryens"
        name="houses-state" id="targaryens" role="tab"
        aria-controls="targaryens-panel" />

    <div class="tabs" aria-hidden="true">
        <label for="starks" id="starks-tab"
            class="tab">Starks</label>
    ...

L'ultimo pezzetto di supporto per ARIA che dobbiamo aggiungere è sui panel. Ogni panel avrà il ruolo di tabpanel e un attributo aria-labeledby con il valore del corrispondente id del tab:

   ...
   <div class="panels">
        <ul id="starks-panel" class="panel active"
            role="tabpanel" aria-labelledby="starks-tab">
            <li>Eddard</li>
            <li>Caitelyn</li>
            <li>Robb</li>
            <li>Sansa</li>
            <li>Brandon</li>
            <li>Arya</li>
            <li>Rickon</li>
        </ul>
        <ul id="lannisters-panel" class="panel"
            role="tabpanel" aria-labelledby="lannisters-tab">
            <li>Tywin</li>
            <li>Cersei</li>
            <li>Jamie</li>
            <li>Tyrion</li>
        </ul>
        <ul id="targaryens-panel" class="panel"
            role="tabpanel" aria-labelledby="targaryens-tab">
            <li>Viserys</li>
            <li>Daenerys</li>
        </ul>
    </div>
    ...

Tutto quello che dobbiamo fare con JavaScript è di impostare il valore di aria-selected al cambio dei radio button:

$('.state').change(function () {
    $(this).parent().find('.state').each(function () {
        if (this.checked) {
            $(this).attr('aria-selected', 'true');
        } else {
            $(this).removeAttr('aria-selected');
        }       
    });
});

Questo fornisce anche un hook alternativo per il supporto di IE7 e IE8. Entrambe i browser supportano i selettori di attributo, quindi potreste aggiornare il CSS per fargli usare [aria-selected] invece di .checked e rimuovere lo shim di supporto.

...

#starks[aria-selected] ~ .tabs #starks-tab,
#lannisters[aria-selected] ~ .tabs #lannisters-tab,
#targaryens[aria-selected] ~ .tabs #targaryens-tab,
#starks:checked ~ .tabs #starks-tab,
#lannisters:checked ~ .tabs #lannisters-tab,
#targaryens:checked ~ .tabs #targaryens-tab {
    /* active tab, now with IE7 and IE8 support! */
}

...

Il risultato è un supporto completo di ARIA con un minimo utilizzo di JavaScript, pur mantenendo i benefici dei tab che possono essere usati non appena il browser li mostra.

Guarda la demo su Codepen: Esempio Show/hide (Radio-Controlled Tabs - ARIA)

Ecco fatto. Notate che dal momento che l'HTML sottostante è disponibile fin da subito, a differenza dell'esempio iniziale con JavaScript, non abbiamo dovuto manipolare o creare dell'HTML in più. In effetti, a parte aggiungere gli ARIA roles e i parametri, dopo tutto non abbiamo dovuto fare granché.

Limitazioni da tenere a mente

Come la maggior parte delle tecniche, anche questa ha alcune limitazioni. La prima e più importante è che lo stato di queste interfacce è transitorio. Quando si fa il refresh della pagina, queste interfacce ritorneranno al loro stato iniziale. Questo funziona bene per alcuni pattern, come le modali o i menu offscreen, e meno bene per altri. Se avete bisogno di persistenza nello stato della vostra interfaccia, è sempre meglio usare i link, le form submission o le AJAX requests per essere sicuri che il server possa tenere traccia dello stato tra le visite o i page load.

La seconda limitazione è che c'è uno "scope gap" in quello che può ricevere stili usando questa tecnica. Dal momento che non si possono mettere i radio button prima degli elementi <body> o <html> e potete solo assegnare uno stile agli elementi che seguono i radio button, non potete influenzare alcun altro elemento con questa tecnica.

La terza limitazione è che potete applicare questa tecnica solo alle interfacce che vengono attivate mediante un click, un tap o un input da tastiera. Potete usare il progressive enhancement per ascoltare interazioni più complesse come lo scrolling, gli swipes, il double-tap o il multitouch, ma se le vostre interfacce sono basate solo su questi eventi, le tecniche standard di progressive enhnacement potrebbero andare meglio.

La limitazione finale riguarda il modo in cui i radio group interagiscono con il flusso dei tab nel documento. Se avete notato nell'esempio dei tab, toccare un tab vi porta nel tab group, ma ritoccandolo di nuovo rimanete nello stesso gruppo. Questo va bene per i tab ed è il comportamento atteso per le ARIA tablist, ma se volete usare questa tecnica per qualcosa come un pulsante di apertura e chiusura, dovrete essere in grado di avere entrambe i pulsanti nel flusso dei tab della pagina indipendentemente dalla posizione del pulsante. Possiamo sistemare in quattro passi questa situazione con un po' di JavaScript:

  1. Impostate i radio button e i label a display: none per toglierli dal flusso dei tab e non mostrarli sulla pagina.
  2. Usate JavaScript per aggiungere buttons dopo ciascun label.
  3. Assegnate uno stile ai button proprio come ai label.
  4. Ascoltate i click sul button e fate in modo che i click partano sui label vicini.

Anche usando questo processo, vi raccomando caldamente di usare una tecnica standard di progressive enhancement per essere sicuri che gli utenti senza JavaScript che interagiscono con le vostre interfacce mediante tastiera non siano confusi dai radio button. Raccomando il seguente JavaScript da inserire nella head del vostro documento:

<script>document.documentElement.className+=" js";</script>

Prima che qualsiasi contenuto venga mostrato, questo aggiungerà la classe js al vostro elemento <html>, permettendovi di assegnare uno stile al contenuto a seconda se il JavaScript sia attivo oppure no. Il vostro CSS quindi sarà simile a questo:

.thing {
    /* base styles - when no JavaScript is present
       hide radio button labels, show hidden content, etc. */
}

.js .thing {
    /* style when JavaScript is present
       hide content, show labels, etc. */
}

Ecco un esempio di menu offscreen implementato usando il processo di cui sopra. Se JavaScript è disabilitato, il menu appare sempre aperto senza alcun overlay:

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Offscreen Menu)

Implementare altri pattern di "contenuto on demand"

Diamo una rapida occhiata al modo in cui potreste creare alcune interfacce utente comuni con questa tecnica. Tenete a mente che una robusta implementazione gestirà l'accessibilità attraverso gli ARIA roles e gli attributes.

Finestre modali con overlay

  • Due radio button che rappresentano la visibilità della modale
  • Uno o più label per modal-open che possono avere qualsiasi aspetto
  • Un label per modal-close con stili che lo facciano sembrare un overlay semitrasparente
  • Un label per modal-close con stili che lo facciano sembrare un pulsante chiuso

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Modal Window)

Menu offscreen

  • Due radio button che rappresentano la visibilità del menu
  • Un label per menu-open con stili che lo facciano sembrare un menu button
  • Un label per menu-close con stili che lo facciano sembrare un overlay semi-trasparente
  • Un label per menu-close con stili che lo facciano sembrare un pulsante chiuso

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Offscreen Menu)

Cambio di layout su richiesta

  • Radio button che rappresentino ciascun layout
  • Label per ciascun radio button con stili da pulsanti

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Layout Manipulation)

Cambio di stili su richiesta

  • Radio button che rappresentino ciascuno stile
  • Label per ogni radio button con stili da pulsanti

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Style Manipulation)

Content carousels

  • X radio button, uno per ciascun panel, rappresentanti il panel attivo
  • Label per ciascun panel con stili che li facciano apparire come controlli pagina precedente/successiva

Guarda la demo su Codepen: Esempio show/hide (Radio-Controlled Carousel)

Altre interfacce touch-based o click-based

Finché l'interazione non dipende dall'aggiunta di nuovo contenuto alla pagina o dall'assegnare stili all'elemento <body>, dovreste essere in grado di utilizzare questa tecnica per ottenere alcune interazioni molto simili a quelle in JavaScript.

Occasionalmente, dovrete gestire più stati sovrapposti nello stesso sistema, ad esempio il colore e la dimensione di un font. In queste situazioni, potrebbe essere più semplice mantenere insiemi multipli di radio button per gestire ciascun stato.

È inoltre caldamente raccomandato usare autocomplete="off" con i radio button per evitare conflitti con l'autofill delle form da parte dei browser, che potrebbe far cambiare stato ai vostri utenti.

Radio-comandare il web?

Il vostro progetto è adatto a questa tecnica? Fatevi queste domande:

  1. Nella mia pagina o nel mio sito, sto usando un JavaScript complesso che non può essere gestito con questa tecnica?
  2. Devo supportare Internet Explorer 6 o altri browser legacy?

Se la risposta ad una qualunque di queste domande è "sì", probabilmente non dovreste cercare di integrare i radio control nel vostro progetto. Altrimenti potreste prenderli in considerazione come una robusta tecnica di progressive enhancement.

La maggior parte delle volte, sarete in grado di eliminare un po' di byte dai vostri files JavaScript e CSS. Occasionalmente, sarete anche in grado di eliminare completamente JavaScript. In ogni caso, guadagnerete l'impressione della velocità e creerete un'esperienza molto più gradevole per i vostri utenti.

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Art Lawry

Art Lawry ha realizzato cose nel web per più di 14 anni e attualmente è JavaScript engineer presso Aereo a Boston. Quando non cerca di trovare l'equilibrio tra responsive design, performance e progressive enhancement, probabilmente sta facendo degli orribili giochi di parole, si sta gustando un buon cocktail al bar o si sta rilassando con sua moglie e il suo cane. Lo trovate su Twitter come @artlawry.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA