C’è chi il vecchio Windows 98 lo ricorda con un sorriso e chi invece non l’ha mai visto in azione, ma ora quel look inconfondibile torna a farsi vivo in una veste tutta nuova. Non come sistema operativo da installare, sia chiaro, bensì come linguaggio grafico per i siti moderni. Il merito è di 98.css, una libreria open source che permette a sviluppatori e designer di ricreare fedelmente l’aspetto delle interfacce Microsoft degli anni Novanta usando soltanto HTML e CSS, senza nemmeno una riga di JavaScript.
Il progetto è disponibile su GitHub e prende quegli elementi che chiunque abbia usato un computer di quegli anni riconoscerebbe al volo. Finestre con i bordi tridimensionali, pulsanti con l’effetto premuto quando ci clicchi sopra, caselle di selezione, barre del titolo. Tutto trasformato in componenti riutilizzabili, pronti per essere infilati dentro siti e applicazioni contemporanee. E non parliamo di una copia fatta con quattro colori buttati a caso. 98.css riproduce proporzioni, ombreggiature e piccoli dettagli grafici che rendevano l’esperienza originale così particolare, il tutto reso accessibile attraverso gli standard web che usiamo oggi.
Un design system che gioca con la nostalgia ma funziona davvero
Sotto il cofano c’è un vero e proprio design system. Vuol dire che offre componenti già pronti come pulsanti, campi di testo, menu a tendina, finestre, schede, barre di stato e persino le strutture ad albero, quelle che gli addetti ai lavori chiamano TreeView. Ogni singolo elemento conserva le caratteristiche visive tipiche di Windows 98, dai bordi rialzati dei pulsanti fino all’effetto incassato quando si preme, senza dimenticare le barre del titolo con i controlli per minimizzare, massimizzare e chiudere la finestra.
La cosa interessante è la semplicità con cui è costruita. La libreria contiene solo CSS, niente JavaScript. Questo la rende compatibile con qualsiasi framework frontend in circolazione, da React a Vue.js, passando per Angular o il più datato jQuery. In pratica chi sviluppa mantiene il controllo completo sulla logica dell’applicazione, mentre 98.css si occupa unicamente della parte grafica. Un bel vantaggio, perché non ti costringe a stravolgere il modo in cui lavori.
Attenzione all’accessibilità e al codice pulito
Dietro l’estetica un po’ retrò c’è anche una cura particolare per l’accessibilità e per la semantica HTML. I pulsanti devono essere veri elementi button, i campi input hanno bisogno delle loro etichette associate e i controlli grafici rispettano gli attributi necessari perché gli strumenti di assistenza possano funzionare come si deve. L’idea di fondo è semplice. L’aspetto può ricordare un sistema operativo di quasi trent’anni fa, ma la struttura del codice segue le regole del web moderno, così da restare usabile anche con le tecnologie di navigazione assistita.
Dove trova terreno fertile questa libreria? Soprattutto nei progetti creativi. Prototipi, giochi indie, portfolio personali, siti sperimentali che vogliono giocare con il fascino della nostalgia digitale. Il successo di 98.css racconta anche qualcosa di più grande, ovvero il ritorno dello scheumorfismo, cioè l’uso di elementi visivi che imitano oggetti fisici reali, dopo tanti anni passati sotto il dominio delle interfacce piatte e minimaliste.