CSS  »  Articoli  »  CSS 3 

Questa è la traduzione dell'articolo CSS Not([hacks]) di Brian Suda pubblicato originariamente su Digital Web Magazine il 7 gennaio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Come sa ogni sviluppatore con un minimo di esperienza, i browser possono presentare differenze nel modo in cui interpretano le regole e le proprietà dei CSS. Un modo per uscire da questa situazione senza tanti mal di testa consiste nell'uso di svariati hack; in certi casi potrebbero invalidare il CSS, ma costringono i browser a leggere solo certe parti del foglio di stile e rendere una pagina o un sito web nel modo più vicino possibile a quello desiderato. Gli hack nei CSS sono insomma uno dei modi comuni con cui impostare istruzioni specifiche per questo o quel browser, si tratti di risolvere il problema della proprietà min-width o quello della resa del box model.

Ma c'è un altro modo. Dimostrerò in che modo sia possibile usare i selettori definiti nei CSS3 come un'alternativa agli hack quando sia necessario avere come target un browser specifico. Gli hack sono un esempio di graceful degradation: si progetta per i browser più capaci e poi si fissano i problemi nei browser più datati o meno aderenti agli standard. Ma cosa accadrebbe se si adottasse l'approccio opposto e lavorassimo secondo il metodo del progressive enhancement?

In questo caso, il progressive enhancement ci porta a scrivere il CSS in modo tale che funzioni su tutti i browser, aggiungendo poi dei miglioramenti indirizzati in modo specifico ai browser più capaci e che supportano meglio le specifiche CSS. Si può pensare a questo approccio come il contrario della graceful degradation.

In verità tutti sanno come stanno le cose: la maggior parte dei problemi deriva dal modo in cui in cui Internet Explorer tratta alcune regole dei CSS. In una parola dai suoi bug di resa. Di conseguenza, molti hack sono basati su bug del parser CSS di Internet Explorer. Per esempio l'incapacità di parsare correttamente i commenti, gli underscore iniziali nei nomi delle proprietà o la resa del box model. Il problema è dunque che molti di questi hack sono specificatamente per IE e possono essere rovinati nel momento in cui il browser dovesse introdurre delle correzioni e risolvere i bug.

ll codice sopra riportato fa riferimento al box model hack: il parser CSS di IE blocca la lettura delle regole alla '}' contenuta nella dichiarazione per voice-family, e così non parsa le altre due dichiarazioni.

Non sarebbe meglio se potessimo continuare a scrivere CSS con dichiarazioni che i browser più vecchi non possono comprendere ma che sono comunque valide? Usando, per esempio, il selettore child ('>'), possiamo nascondere certi blocchi di codice a IE6:

L'esempio qui sopra si riferisce esattamente a questo scenario: tutte le versioni di IE fino alla 6 non possono intepretare questa regola, IE7 invece sì. Si può usare tutto ciò per attuare una strategia di progressive enhancement nei nostri progetti. I browser più recenti iniziano a sfruttare i benefici che portano queste regole senza dover aggiornare di continuo i nostri CSS.

Questo è un approccio molto migliore, dunque, proprio perché consente il progressive enhancement. Mentre i browser diventano più aderenti agli standard in fatto di CSS, le regole che man mano definiamo iniziano a funzionare. Non c'è bisogno di impazzire con cose come /* */ o _proprietà.

Altri articoli

Altre guide

Altre newsletter