I Cascading Style Sheets (CSS) hanno visto la luce per la prima volta nel lontano 1996, quando sono stati introdotti come strumento per separare il contenuto strutturale di una pagina web dalla sua presentazione visiva. Inizialmente, il loro utilizzo era limitato principalmente alla formattazione di testo, colori di sfondo e layout di base. Tuttavia, nel corso degli anni, il ruolo e la complessità di CSS sono cresciuti in modo esponenziale, trasformandoli in uno strumento essenziale per la progettazione e lo sviluppo web.

Il viaggio attraverso l'evoluzione del CSS è simile a un'avventura in una macchina del tempo digitale. Tuttavia, come in ogni epoca, ci sono stati trend di design che, guardando indietro, preferiremmo lasciare nel passato. 

In questo articolo esploriamo 5 tendenze del passato che hanno lasciato un'impronta indelebile nella storia del web design... ma che oggi sono felicemente superati!

1. C’erano una volta i layout tabellari

Un tempo, uno dei metodi più comuni per creare layout complessi su una pagina web era l'uso di tabelle HTML. Questo approccio permetteva di organizzare i contenuti in righe e colonne, fornendo una struttura flessibile per la disposizione dei contenuti. Tuttavia, con l'avanzare delle tecnologie e le migliori pratiche nel design web, i layout tabellari sono stati ampiamente abbandonati a favore di tecniche più moderne e flessibili.

I layout tabellari presentano diversi svantaggi che li rendono poco adatti per la creazione di layout web avanzati. Innanzitutto, l'uso delle tabelle comporta un markup complesso e difficile da mantenere, che può rendere il codice HTML ingombrante e di difficile comprensione.

Inoltre, le tabelle possono creare problemi di accessibilità per gli utenti con disabilità, complicando la comprensione della struttura della pagina e la navigazione tra i contenuti. La rigidezza intrinseca delle tabelle limita la flessibilità nel progettare layout creativi e reattivi, adattabili a diverse dimensioni di schermo e dispositivi.

Oltre a ciò, i layout tabellari possono influire negativamente sulle prestazioni complessive del sito web, poiché richiedono un maggior numero di elementi HTML da elaborare e renderizzare. Questo può rallentare il caricamento delle pagine e consumare più risorse del browser. Infine, i motori di ricerca potrebbero avere difficoltà nell'interpretare correttamente il contenuto all'interno delle tabelle, influendo negativamente sul posizionamento del sito nei risultati di ricerca.

2. Frame e iFrame

Un altro metodo obsoleto per strutturare il contenuto e le navigazioni erano i frame e gli iFrame, utilizzati in passato per creare layout complessi e incorporare contenuti esterni all’interno di una pagina web.

I frame consentivano di dividere la finestra del browser in più sezioni, ciascuna delle quali poteva caricare una pagina HTML separata. Questo approccio offriva la possibilità di aggiornare dinamicamente una parte della pagina senza doverla  ricaricare interamente, migliorando l'esperienza utente.

Tuttavia, l'uso di frame presentava diversi problemi. Uno dei principali era la mancanza di accessibilità e usabilità, poiché rendeva difficile per gli utenti navigare all'interno del sito e mantenere un contesto coerente. Inoltre, i frame causavano problemi con la condivisione di link, poiché l'URL visualizzato nel browser non corrispondeva necessariamente all'URL della pagina principale.

I frame sono stati gradualmente sostituiti dagli iFrame, che consentono di incorporare una pagina web all'interno di un'altra. Gli iFrame hanno semplificato il processo di incorporazione di contenuti esterni, come video, mappe o widget sociali, all'interno di una pagina web. Tuttavia, anche gli iFrame presentano sfide simili in termini di accessibilità e usabilità, oltre a potenziali problemi di sicurezza se non gestiti correttamente.

Inoltre, l'uso eccessivo di iFrame può influire negativamente sulle prestazioni del sito web, poiché ogni iFrame aggiunge un'ulteriore richiesta HTTP e può rallentare il caricamento complessivo della pagina. Inoltre, gli iFrame possono presentare problemi di visualizzazione su dispositivi mobili, poiché potrebbero non essere ottimizzati per le diverse dimensioni dello schermo.

Con l'avanzare delle tecnologie web e lo sviluppo di nuovi approcci per creare layout dinamici e incorporare contenuti esterni, l'uso di frame e iFrame è diventato sempre più limitato. Oggi, gli sviluppatori tendono ad utilizzare tecniche più moderne e responsive, come CSS Grid e Flexbox, per creare layout flessibili e adattabili a diverse dimensioni di schermo, mentre l'incorporazione di contenuti esterni è spesso gestita attraverso API e strumenti di terze parti.

3. Animazioni flashy e tessiture di sfondo? No, grazie

Le prime ere di CSS e web design hanno visto un'abbondanza di animazioni eccessive e tessiture di sfondo complesse.

Le animazioni "flashy" erano caratterizzate da movimenti rapidi, transizioni sfarzose e effetti visivi appariscenti che spesso dominavano la pagina. Queste animazioni, se utilizzate in modo eccessivo o mal posizionate, potevano distogliere l'attenzione dall'effettivo contenuto della pagina e rendere l'esperienza utente confusionaria e poco piacevole. 

Le tessiture di sfondo, d'altra parte, erano pattern grafici ripetitivi utilizzati come sfondo di un sito web. Questi pattern potevano essere realizzati con immagini di sfondo o mediante CSS utilizzando la proprietà background-image. Mentre alcune tessiture di sfondo erano discrete e contribuivano a creare un'atmosfera visiva interessante, altre erano estremamente elaborati e di cattivo gusto. L’ utilizzo di sfondi eccessivamente dettagliati o di cattivo gusto potevano appesantire visivamente la pagina, e rendere difficile la lettura del testo o la navigazione del sito e la sua accessibilità, specialmente per gli utenti con disabilità visive che possono trovare difficile distinguere il testo dallo sfondo.

Questi elementi, sebbene tecnicamente impressionanti all'epoca, spesso distraevano dall'effettivo contenuto della pagina, rallentavano i tempi di caricamento e compromettevano l'usabilità su dispositivi con risorse limitate.

Entrambi questi approcci erano molto diffusi nell'era precedente all'avvento delle moderne tecniche di design web, ma nel tempo sono stati gradualmente abbandonati a favore di un approccio più pulito, minimalista e centrato sul contenuto. Oggi, gli sviluppatori e i designer tendono ad utilizzare animazioni più discrete e funzionali, come le transizioni CSS e le animazioni SVG, che migliorano l'esperienza utente senza sovraccaricare la pagina. Allo stesso modo, le moderne tecniche di design web si concentrano sull'uso di sfondi e pattern più semplici e leggeri, che si adattano meglio alle diverse dimensioni dei dispositivi e favoriscono la leggibilità del contenuto.

4. Utilizzo eccessivo di caratteri decorativi: less is more

Un altro errore comune era l'eccessivo utilizzo di caratteri decorativi e font elaborati, spesso a discapito della leggibilità e della chiarezza del testo, ma anche dell’accessibilità delle pagine web. Gli sviluppatori spesso sceglievano font elaborati e decorativi per cercare di aggiungere stile e personalità alle loro pagine web.

Tuttavia, questa pratica poteva rendere difficile la lettura del testo, specialmente su dispositivi con schermi di dimensioni ridotte o in condizioni di illuminazione sfavorevoli.

Con il passare del tempo, i designer web hanno riconosciuto l'importanza della leggibilità e della chiarezza del testo e hanno iniziato a privilegiare l'uso di font semplici, puliti e leggibili. La tendenza attuale è quella di utilizzare font sans-serif per il testo principale e di riservare i caratteri decorativi per titoli o elementi di design occasionali. Questo approccio non solo migliora la leggibilità del testo, ma contribuisce anche a creare un'esperienza utente più coerente e professionale.

5. Stili inline e sovraccarico di ID

Un' ulteriore abitudine ora fortemente scoraggiata era l'uso eccessivo di stili inline e un'enorme dipendenza dagli ID per applicare stili CSS.

Gli sviluppatori spesso inserivano direttamente le regole CSS all'interno degli elementi HTML utilizzando l'attributo "style". Questo approccio rendeva difficile la gestione e la manutenzione del codice, poiché lo stile era disperso all'interno del markup HTML anziché essere centralizzato in file CSS separati. Inoltre, l'utilizzo di stili inline comportava la ripetizione del codice CSS per ogni singolo elemento, aumentando la complessità del codice e riducendo la sua leggibilità.

Allo stesso modo, si verificava un sovraccarico di ID per lo stile, dove gli sviluppatori utilizzavano gli ID HTML come se fossero selettori CSS per applicare stili specifici a singoli elementi. Questo approccio generava codice ridondante e poco efficiente, poiché gli ID dovrebbero essere univoci e utilizzati per identificare elementi specifici all'interno del markup HTML, non per applicare stili.

Entrambi questi approcci portavano a un codice CSS disorganizzato e difficile da gestire, soprattutto su siti web complessi con molte pagine e elementi. Inoltre, potevano causare problemi di specificità CSS, rendendo difficile sovrascrivere gli stili e mantenere coerenza nel design.

Con il tempo, sono stati adottati approcci più strutturati e organizzati per gestire lo stile delle pagine web, come l'utilizzo di fogli di stile esterni e la classificazione degli elementi HTML con classi significative per l'applicazione degli stili. Questo ha permesso una migliore separazione tra struttura e presentazione, migliorando la manutenibilità e la scalabilità del codice. Inoltre, l'adozione di metodologie CSS come BEM (Block Element Modifier) e l'uso appropriato di selettori CSS ha contribuito a ridurre la complessità e a migliorare la gestione degli stili nelle pagine web.

La rivoluzione CSS 3 e oltre

Fortunatamente, l'evoluzione di CSS, in particolare con l'introduzione di CSS3, ha portato a miglioramenti significativi che hanno reso molte di queste pratiche obsolete. Strumenti come Flexbox, Grid Layout, e le media queries hanno rivoluzionato il design responsivo, permettendo agli sviluppatori di creare layout flessibili e adattivi con meno codice e maggiore precisione.

Sempre maggiore attenzione viene dedicata alla performance, puntando sull' ottimizzazione per ridurre i tempi di caricamento delle pagine web, all'accessibilità, con nuovi strumenti e tecniche che mirano a migliorare l'esperienza per gli utenti con disabilità, e infine alla compatibilità cross-browser , diventata una priorità. Anche l'integrazione con altre tecnologie web, come HTML e JavaScript, continuerà a crescere, portando a una maggiore interattività e funzionalità avanzate.

In sintesi, il futuro del CSS sarà caratterizzato da un costante progresso tecnologico e dall'adattamento alle mutevoli esigenze degli sviluppatori e degli utenti del web.