CSS Crossbrowser

Come utilizzare i CSS per ogni tipo di browser e vivere felici

Se avete seguito gli «articoli sui CSS» di HTML.it o se avete superato la fase di apprendistato avete certamente capito una cosa: i CSS sono uno strumento straordinario al servizio del web designer, ma la loro implementazione va incontro a grossi problemi. La radice di tutto ha un nome: incompatibilità. Tra browser diversi, tra versioni differenti dello stesso software, tra piattaforme.

L’attività di uno sviluppatore rischia così di trasformarsi in un’odissea, in una ricerca estenuante di trucchi e soluzioni alla miriade di bugs che affliggono i browser presenti sul mercato. Un’interessante esempio/discussione su quanto detto lo trovate sul sito usabile.it, recentemente “riscritto” aderendo agli standard del W3C. Anche qui il dilemma è stato: realizzare un sito standard-based o tenere conto anche dei browser più datati?

Una risposta valida sempre e per tutti non c’è. Se intendete usare i CSS mantenendo la compatibilità con il passato potete usare alcune tecniche definite e affinate negli anni. Ne prenderemo in considerazione tre:

  • L’uso di un CSS universale
  • Il metodo @import
  • Lo sniffing dei browser con Javascript

Un CSS universale

La prima soluzione prevede la creazione di un foglio di stile che si adatti a tutti i browser (almeno a quelli che decidiamo di supportare completamente).

Vantaggi: risolviamo i problemi di incompatibilità. Punto. Lista degli svantaggi. Innanzitutto si dovrà necessariamente volare basso. Ovvero: scordiamoci le caratteristiche avanzate dei CSS. Secondo: bisogna armarsi di pazienza, tanta, e andare a verificare per ciascuna regola da definire le incompatibilità incrociate.

Se questa è la via che intendete percorrere non potete ignorare due risorse.

  • La CSS Master List di Eric Meyer sul sito di WebReview: è una tabella in cui sono evidenziate tutte le proprietà di CSS1 e il modo in cui sono supportate dai vari browser (aggiornata il 14 gennaio).
  • La Test suite di RichInStyle.com con l’annesso database dei bug: una batteria di test su tutti i bug di tutti i browser su tutti gli aspetti di CSS2. Praticamente la “Treccani” dei fogli di stile

Il metodo @import

Questo secondo metodo è certamente meno dispendioso in termini di tempo, diciamo più razionale. Si basa su un presupposto. C’è un browser che fa veri disastri con i CSS: il suo nome è Netscape 4. Se riusciamo a “ingannarlo” abbiamo risolto buona parte dei nostri problemi di compatibilità.

In effetti la soluzione poggia su una delle tante falle di Netscape: la sua incapacità di implementare il metodo @import. Vediamo di cosa si tratta.

Per collegare un foglio di stile ad una pagina si usa in genere il tag <link> all’interno della sezione <head>:

<link rel=”stylesheet” type=”text/css” href=”stile.css” >

Esiste però un sistema alternativo, che prevede l’importazione di un foglio esterno all’interno dei tag <style> </style> tramite l’istruzione @import:

<style type=”text/css”>
  @import url(stile.css);
</style>

La cosa per noi interessante è che le due modalità possono essere combinate nello stesso documento. In tal modo realizzeremo due fogli di stile. Il primo, specifico per Netscape 4, lo colleghiamo con <link>; il secondo, per gli altri browser, lo incorporiamo con il metodo @import. Per “altri browser” intendiamo quelli che offrono un supporto almeno decente di CSS1. Essi, operano una sorta di “fusione” tra i due fogli di stile, ma piazzando l’istruzione @import sotto il tag <link>, diamo ad essa più importanza e perciò i browser in questione privilegiano gli stili contenuti nel foglio così importato. Ecco come si presenta la sintassi:

<link rel=”stylesheet” type=”text/css” href=”stile_netscape4.css” >
<style type=”text/css”>
  @import url(stile.css); /*per IE 5, 5.5, 6 Win e Mac, Opera 5 e 6, Netscape6x */
</style>

Nell’esempio allegato potete osservare un’implementazione di questo metodo. Se avete Netscape 4 noterete subito le differenze.

Alcune importanti osservazioni per concludere.

  1. Attenzione alle regole che definite nei fogli di stile! Non mettete mai nel foglio per Netscape istruzioni che non usate nel secondo foglio. Mi spiego: se nel CSS per Netscape inserite, ad esempio, uno stile per il tag <h1> e non fate lo stesso nel secondo foglio, Explorer e gli altri browser, erediteranno quello stile. In pratica, se non trovano il selettore h1 nel primo CSS (@import) lo cercheranno nel secondo (<link>). Il risultato lo potete vedere nell’esempio allegato (punto 2).
  2. Potete invece fare il contrario: inserire nel secondo CSS classi o selettori in più rispetto al primo. Visto che Netscape ignora completamente l’istruzione @import, la cosa non produrrà effetti sgraditi (esempio, punto 3).
  3. Nel CSS per Netscape, visto il numero enorme di bug da cui è afflitto, vi consiglio di mantenervi sull’essenziale. Un utile articolo sui principali bug lo trovate sul sito del CSS Pointers Group.
  4. Il metodo @import funziona anche per Explorer 3 (ma esiste ancora?!).

Un CSS per ogni browser

L’ultimo metodo si basa sul classico sniffing del browser. Consiste essenzialmente nell’implementazione di un CSS specifico a seconda del software rilevato tramite poche linee di Javascript. L’argomento è stato trattato ampiamente e ottimamente in un precedente articolo di Html.it («Riconosciamo i browser con Javascript») al quale vi rimando per gli aspetti teorici e per il codice.

Vorrei solo fare al riguardo una piccola integrazione/osservazione. L’articolo spiega un semplice script che testa tre possibilità:

Condizione Codice Javascipt
Se il browser è Netscape 4 carico il CSS x

if (document.layers){ //Netscape 4.x
document.write(“<link rel=’stylesheet’ href=’stile_netscape4.css’ type=’text/css’>”);
}

Se il browser è Explorer (4, 5, 6) carico il CSS y

else if (document.all){ // Explorer
document.write(“<link rel=’stylesheet’ href=’stile_explorer.css’ type=’text/css’>”);
}

Se il browser è Netscape 6 carico il CSS z

else if (document.getElementById){ //Netscape 6.x
document.write(“<link rel=’stylesheet’ href=’stile_netscape6.css’ type=’text/css’>”);
}

Come si può notare, lo script equipara le versioni di Explorer dalla 4 alla 6. Dal punto di vista del supporto dei CSS sarebbe però più corretto (e razionale) suddividere i browser diversamente. Explorer (Win o Mac) 5x e 6 sono da questo punto di vista molto più vicini a Netscape 6 che ad Explorer 4 (che ha un supporto piuttosto scarso). In pratica si tratta di rivedere lo script affinchè i browser con supporto del DOM implementino lo stesso CSS. Ecco una versione riveduta e corretta che svolge questa funzione:

<script language=”JavaScript”>
<!–
if (document.layers){ //Netscape 4.x
document.write(“<link rel=’stylesheet’ href=’stile_netscape4.css’ type=’text/css’>”);
}
else if (document.all && !document.getElementById) { // solo Explorer 4
document.write(“<link rel=’stylesheet’ href=’stile_explorer4.css’ type=’text/css’>”);
}
else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
document.write(“<link rel=’stylesheet’ href=’stile_dom.css’ type=’text/css’>”);
}
//–>
</script>

La parte in rosso è quella aggiunta. In questo modo tutti i browser che supportano l’espressione getElementById (quindi, anche se parzialmente, il DOM del W3C) caricheranno lo stesso CSS.

Lo stesso risultato (separare i browser di quinta generazione e aderenti agli standard da quelli più vecchi) si può ottenere anche in questo modo:

<script type=”text/javascript” language=”javascript”>
<!– //
if (!document.getElementById) {
document.write(“<link rel=’stylesheet’ href=’stile_vecchibrowser.css’ type=’text/css’>”);
}
else {
document.write(“<link rel=’stylesheet’ href=’stile_dom.css’ type=’text/css’>”);
}
// –>
</script>

Provate lo script in questo esempio. Caricatelo prima con un browser recente, poi (se lo avete) con uno datato.

I file usati negli esempi possono essere scaricati per una comoda visualizzazione offline. Alla prossima!

I Video di HTML.it

CloudParty 2015 Bologna: Introduzione ad AngularJS

Introduzione generale su cos’è AngularJs, quali sono i componenti principali e come utilizzarli. Partiamo dalle base per riuscire a comprendere […]