
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
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:
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.
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.
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 |
Se il browser è Explorer (4, 5, 6) carico il CSS y |
else if (document.all){ // Explorer |
Se il browser è Netscape 6 carico il CSS z |
else if (document.getElementById){ //Netscape 6.x |
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!
Se vuoi aggiornamenti su CSS Crossbrowser inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Introduzione generale su cos’è AngularJs, quali sono i componenti principali e come utilizzarli. Partiamo dalle base per riuscire a comprendere […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Gestione avanzata degli eventi in Ext.js
Presentazione di Klik, il sistema per eseguire con un semplice clic applicazioni su Linux
Alcuni di noi sono abituati ad utilizzare la stessa distribuzione per anni. Dietro a ognuna di questa c’è spesso una […]
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.