Come modificare il foglio di stile CSS di Bootstrap per renderlo conforme agli standard W3C

bootstrap-css-modificato-risultato-validazione

I siti web realizzati in Bootstrap non sono conformi allo standard CSS 3.0 del W3C. In questo articolo vedremo come modificare il CSS base di Bootstrap per renderlo conforme allo standard.

Bootstrap è un progetto che integra le tecnologie HTML5, JavaScript e CSS per la costruzione di siti e applicazioni per il web. Sviluppato da Mark Otto e Jacob Thornton presso Twitter è nato con l’obiettivo di realizzare un framework che uniformasse i vari componenti che costituiscono l’interfaccia web, dato che la presenza di diverse librerie aveva portato ad incoerenze ed elevati oneri di manutenzione. Nel 2011 Twitter ha rilasciato il progetto come open source attraverso la pubblicazione sulla piattaforma GitHub. Bootstrap è compatibile con le ultime versioni dei principali browser. Fin dalla versione 2.0 supporta il responsive web design, adottato come impostazione predefinita dalla versione 3. 

Oggi tantissimi siti web utilizzano il framework Bootstrap per realizzare, con un unico template grafico, un sito “responsive”, ovvero in grado di adattarsi graficamente in modo automatico al dispositivo con cui è visualizzato. Per quanto il ricorso alle librerie di Bootstrap ed il particolare all’utilizzo del suo CSS ci aiuti a rendere il sito adattabile al dispositilo, lo stesso foglio di stile non risulta conforme allo standard W3C. Questo è un problema noto al team di sviluppo e per il momento trascurato, pur di mantenere un sistema in grado di essere compatibile con un gran numero di browser. 

Vediamo con un esempio come è possibile superare questo problema, in un sito web che utilizza gli stili ed i componenti Bootstrap.

Costruzione della pagina web di esempio

Analizziamo e testiamo la compatibilità W3C partendo dalla pagina di “Hello World” di Bootstrap, così come proposta sul sito ufficiale e realizzata come di seguito utilizzando i file CSS e JavaScript disponibili in CDN.

Per la validazione W3C esistono due verifiche di conformità, una relativa all’ipertesto, che effettua una verifica semantica dell’HTML del documento web, ed una verifica della semantica relativa al foglio di stile CSS. Di seguito, sarà illustrato come effettuare la verifica della pagina web appena creata, utilizzando i servizi online del W3C.

Validazione del Markup

Per la validazione del codice HTML è possibile utilizzare il servizio presente al seguente indirizzo https://validator.w3.org/, comparirà una interfaccia come quella nella seguente immagine.

w3c-markup-validation-service

Prima di avviare il test è necessario inserire l’url della pagina web da testare, quindi è necessario che la risorsa sia ospitata su un server online (non in locale). Nel caso specifico di questo tutorial ho utilizzato il seguente link “http://aoliverio.com/sample-code/bootstrap-hello-world” e cliccando sul tasto sottostante l’indirizzo si avvia la validazione. Nel nostro caso il validatore non ha rilevato nessun errore, del resto era quello che ci si aspettava essendo la pagina veramente minimale e con un ipertesto formato da pochissime righe di codice HTML, in ogni caso questo tipo di verifica non viene influenzata da codice delle librerie ma dal solo HTML e XHTML della pagina web.

Validazione del Foglio di Stile

Per la verifica del foglio di stile, in particolare per verificare la conformità allo standard CSS 3.0, è possisibile anche in questo caso utilizzare il servizio online del W3C, al seguente indirizzo https://jigsaw.w3.org/css-validator/, l’interfaccia si presenterà come nell’immagine seguente.

w3c-css-validation-service

In questo caso si andrà a validare la conformità del foglio di stile Bootstrap allo standard CSS 3.0, nel nostro esempio essendo “bootstrap.min.css” l’unico foglio di stile utilizzato nella pagina. Anche in questo caso, si inserisce il link della pagina da validare e si avvia il test. Il validatore, sulla versione di Bootstrap utilizzata (l’ultima stabile disponibile), ha rilevato 30 errori e 167 warning, un pò troppi per pensare di intervenire manualmente sul foglio di stile.

errori-rilevati-bootstrap-css

Il problema di validazione riscontrato è noto al team di sviluppo Bootstrap e la maggior parte degli errori, come affermato dagli stessi sviluppatori, sono dovuti a situazioni e formalismi utilizzati per garantire la compatibilità con browser ormai obsoleti e poco utilizzati. Bene, se questo problema può essere trascurato per la maggior parte dei siti internet oggi presenti in rete, non è ammissibile per i siti della pubblica amministrazione o altri enti che devono aderire a rigide regole sulla accessibilità e di conformità agli standard, come il W3C, utilizzare liberare e codice di terze parti non conforme.

Analizziamo l’output del validatore

Proprio di recente mi sono imbattuto in questa problematica, dove era richiesta la conformità del sito web, in aderenza agli standard W3C, pur mantenendo inalterato l’aspetto grafico e le funzionalità responsive dello stesso sito, garantito dal ricorso agli oggetti e componenti Bootstrap. Cercando su internet non ho trovato molte soluzioni al problema, anzi, in quasi tutti i siti consultati, l’unico consiglio è quello di rinunciare alla conformità CSS 3.0, tutti con la stessa motivazione: il team di sviluppo di Bootstrap ha volutamente trascurato questo aspetto proprio per garantire il funzionamento anche sui browser più obsoleti.

Però, analizzando meglio l’output del validatore CSS online (https://jigsaw.w3.org/css-validator/) sono riportati in ordine gli errori prima, successivamente gli avvisi (tantissimi warning meno rilevanti ai fini della validazione) e subito dopo è presente una sezione in cui sono riportate le informazioni valide per il foglio di stile (CSS) usato nella pagina, in linguaggio CSS (nel caso analizzato, oltre 5000 righe di codice per la versione 3.3.7 di Bootstrap).

informazioni-valide-per-il-foglio-di-stile-bootstrap

Attenzione, nel caso in cui la vostra pagina faccia riferimento a più fogli di stile, come spesso in pratica  accade, il risultato con le informazioni valide per il foglio di stile (CSS), aggrega tutti i fogli di stile richiamati nella pagina, quindi se volete utilizzare queste informazioni per bonificare il codice di un singolo foglio di stile, bisogna avere l’accortezza di utilizzare nella pagina web il solo foglio di stile che si intende validare. Ripetere più volte l’operazione, cambiando il foglio di stile, se si vogliono bonificare più fogli di stile utilizzati nella stessa pagina.

La soluzione

La soluzione di seguito illustrata, prevede di selezionare tutto il codice CSS proposto dal validatore e copiarlo per creare un nuovo file CSS, nominato “bootstrap-w3c-compliance.css” che utilizzeremo al posto del foglio di stile originale Bootstrap. A questo punto scarichiamo la libreria Bootstrap e copiamo i file nella cartella del progetto, questo passaggio è necessario perché il foglio di stile Bootstrap punta a specifici fonts, che devono essere organizzati per come richiamati dal foglio di stile.

download-bootstrap

Successivamente, copiamo il file creato “bootstrap-w3c-compliance.css” nella directory /css, in cui troviamo il foglio di stile Bootstrap originale. Per completare, modifichiamo la nostra pagina di esempio per utilizzare il foglio di stile locale “modificato” al posto del foglio di stile disponibile in CDN. Il codice completo della nuova “Home Page” si presenta come di seguito.

A questo punto possiamo verificare nuovamente la conformità della pagina allo standard CSS 3.0 attraverso il validatore online (https://jigsaw.w3.org/css-validator/). Se il codice è valido, il risultato è quello riportato nella seguente immagine. Il test è stato avviato utilizzando il seguente link “http://aoliverio.com/sample-code/bootstrap-w3c-compliance”.

bootstrap-css-modificato-risultato-validazione

Conclusioni

Quella illustrata in questo articolo è una soluzione, da me applicata con successo per risolvere il problema, senza perdere (almeno per quanto sono riuscito a rilevare) nulla in termini di funzionalità e mantenendo inalterato il template del sito sul caso che mi sono trovato a risolvere. Mi auguro che questo articolo vi aiuti a validare i vostri siti che utilizzano Bootstrap. Fatemi sapere se avete domande o consigli, lasciando un commento qui sotto.

Lascia un commento