Quando si approfondiscono argomenti specifici di un linguaggio web ci si concentra spesso su una particolare tecnologia. Questo approccio è usato soprattutto all'inizio, per trasmettere a neofiti e principianti le nozioni base di HTML, JavaScript, CSS. Col passare del tempo, e con l'aumentare dell'esperienza, è naturale abbattere i confini tra le diverse tecnologie e assumere una visione unitaria. Abbiamo già visto un caso simile parlando del DOM HTML.
Il DOM è un ottimo esempio di “cross-over” tra HTML e JavaScript. La struttura del DOM descrive gli elementi di una pagina HTML, ma al tempo stesso determina le API utilizzate da JavaScript. Questa visione unitaria può essere allargata per comprendere anche CSS. Se gli elementi HTML rappresentano gli oggetti principali all'interno di una pagina web, allora le proprietà CSS possono essere pensate come gli attributi di rendering degli oggetti, mentre JavaScript svolge la funzione di reagire all'utente, rendendo dinamiche struttura e proprietà degli oggetti (i nodi dell'albero HTML). Per certi versi il terzetto ricorda il pattern MVC (Model – View – Controller) che abbiamo discusso in questo articolo.
L'analogia va presa con le pinze, perché non implica similitudini tecniche o sintattiche, dato che il modello MVC è un pattern di programmazione, mentre l'HTML è un linguaggio di markup. Ma a livello concettuale l'analogia è calzante e dovrebbe rendere bene l'idea della visione unitaria
Analogia HTML, CSS, JavaScript e MVC
Passando dalla teoria alla pratica, l'approccio unitario aiuta ad accettare il fatto che è difficile, o addirittura inutile, parlare di HTML senza coinvolgere JavaScritp o CSS. Per chiarire il concetto alcuni esempi concreti.
La proprietà overflow
E' un esempio di proprietà CSS che riguarda molto da vicino il linguaggio HTML. Se ci occupiamo solamente di HTML, lasciando agli “esperti” i dettagli del CSS, di fatto stiamo imponendo a tutti gli elementi HTML la proprietà overflow di default, ovvero
overflow:visible
oltre al valore di default, la proprietà overflow ammette altre scelte possibili: hidden, scroll ed auto.
L'overflow regola il comportamento del testo contenuto all'interno di un elemento HTML quando le dimensioni dell'elemento non sono sufficienti ad ospitare il contenuto. Consideriamo ad esempio un div o un paragrafo al quale assegniamo le dimensioni 100x100 (pixels). Se all'interno dell'elemento inseriamo un testo piuttosto lungo, ad esempio un centinaio di parole, il testo “uscirà” fuori dal contenitore e andrà a sovrapporsi agli elementi vicini, provocando uno sgradevolissimo effetto.
Quello che si fa in molti casi, per pigrizia o ignoranza delle proprietà CSS, è aumentare le dimensioni del box contenitore in base al contenuto. E' una soluzione che lascia il tempo che trova, perché a seconda del browser avremo comportamenti diversi. Inoltre, ogni volta che cambiamo i contenuti dovremo aggiustare le dimensioni del box, rischiando di far saltare l'intero layout della pagina.
Ecco perché, in questo caso, è utile la collaborazione di HTML e CSS: con l'HTML definiamo struttura e contenuti, delegando a CSS il compito di gestire il layout. Abbiamo a disposizione almeno tre alternative al valore visible:
- hidden: la parte del testo che “sfora” dal contenitore viene nascosta
- scroll: l'elemento viene trasformato in una specie di
TextArea, ovvero vengono aggiunte due barre di scorrimento (una verticale e una orizzontale) - auto: come il precedente, ma vengono aggiunte solo le barre che servono. Se il testo è troppo lungo comparirà una barra verticale, se è troppo largo una orizzontale, se "sfora" in ambo le direzioni compariranno tutte e due le barre
Nella maggioranza dei casi una qualsiasi delle tre scelte qui sopra è migliore di quella di default (overflow:visible). L'esempio mostra come la collaborazione “unitaria” di HTML e CSS risolve molti dei piccoli problemi quotidiani.
Gestione delle immagini
Un utilizzo comune di JavaScript è quello di caricare le immagini prima che vengano visualizzate, per migliorare i tempi di risposta di una pagina, oppure caricare le immagini della giusta dimensione in base alle scelte dell'utente. Anche in questo caso esiste una soluzione più semplice, che permette di gestire molte proprietà dell'immagine senza richiedere alcun codice JavaScript. Ancora una volta ci viene in soccorso una proprietà CSS poco conosciuta: la proprietà clip.
Alla data di questo articolo la proprietà supporta solamente due valori: auto (il valore di default) e rect. Il valore auto non ci interessa, perché significa ignorare la proprietà clip. Potrebbe tornare utile solo se abbiamo bisogno di ripristinare la situazione di default. Il valore rect permette di ritagliare l'immagine, ovvero definire un rettangolo “sovrapposto” all'immagine e nascondere tutto il resto, usando la sintassi
clip:rect(top, right, bottom, left) ;
che specifica le coordinate del rettangolo da ritagliare. La proprietà si applica solamente ai blocchi con position:absolute, per cui dobbiamo ricordarci di usare i riferimenti assoluti per gli elementi HTML che vogliamo "clippare". Notiamo che stiamo parlando di "elemento HTML", e non solo di immagini, perché la proprietà clip può essere applicata anche ad un generico elemento di blocco.
Oltre alla questione dell'attributo position, esiste un altro caso in cui non possiamo usare la proprietà clip. Creiamo un po' di suspence e proviamo a pensarci un attimo (senza sbirciare la risposta). Quand'è che potrebbe non avere senso tagliare un elemento HTML? Pensiamo alla visione unitaria introdotta all'inizio dell'articolo e riformuliamo la domanda: chi potrebbe generare un conflitto con il clipping dell'immagine?
Si tratta proprio della proprietà overflow discussa sopra! Quando specifichiamo un valore di overflow (diverso dal default) non possiamo clippare l'elemento HTML. Dopotutto è logico: se gestiamo l'overflow di un elemento in un certo modo, potrebbe non essere possibile ridurre o ritagliare la parte dell'elemento nascosta. Il confronto tra clip ed overflow dovrebbe confermare quanto detto finora: la conoscenza dell'HTML non si raggiunge studiando a menadito tutte le tag HTML (con relativi attributi), ma migliorando di pari passo anche le competenze JavaScript e CSS.
