Sarebbe bello disegnare/programmare un sito e vederlo uguale in ogni computer.
Purtroppo non è così, perché non ancora tutti browser interpretano il codice (soprattutto CSS) alla stessa maniera, e dipende a volte anche dal sistema operativo.
Di trucchi coi CSS ne avevo già parlato QUA, ma è sempre una tematica buona per essere rispolverata…
Le statistiche ci dicono pressappoco che il 56% dei navigatori viaggia su Windows+Explorer e il 23% usa Windows+Firefox, quindi abbiamo ancora un bel motivo per preoccuparci di come Internet Explorer visualizza il nostro sito.
CSS all’ultima moda
Le ultime tendenze in fatto di css – siamo nel 2013 – consigliano la creazione di classi ad hoc per Explorer, cioè aggiungere una classe CSS con la versione di Internet Explorer direttamente dentro il tag HTML sfruttando i commenti condizionali (vedi più in basso) propri di Explorer.
In parole povere, il codice in questo modo controlla se il browser dell’utente è IE, e di quale versione si tratta, quindi inserisce una classe appropriate nel tag HTML.
Così, per usare un CSS solo per una determinata versione di Explorer basta usare la classe corrispondente come parent selector (es.: .ie6 .riga).
Dal canto mio, tendo ad inserire anche un’altra classe, più generica, per avere la possibilità di selezionare più di una versione di Explorer in un colpo solo.
Di solito quindi inserisco la classe “ie” sulle versioni di Explorer inferiori alla 10 che sono state quelle meno aderenti agli standard dei linguaggi di programmazione; da Explorer 10 in poi c’è il pieno supporto di Css3 e Html5:
<!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
E poi?
Un trucchetto che permette un’impostazione rapida e indolore, se vogliamo che il nostro CSS scelga “solo” tra Firefox, Explorer 6 o 7.
{ height: 15px; #height: 15px; _height: 21px; }
La prima riga viene applicata a tutti i browser.
La seconda viene vista solo da Internet Explorer.
La terza viene applicata solo a Internet Explorer 6 o precedente.
Conditional CSS
Conditional-CSS è uno strumento che permette a chi usa i CSS di usare la logica condizionale (“if“) per indicare diversi comandi CSS per diversi browser o gruppi di browser.
Ad esempio…
a { [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; [if IE 5.0] margin-top: -1px; [if IE] text-decoration: expression(hideFocus='true'); }
Le caratteristiche:
- definire CSS per ogni web browser
- workaround per i più comuni difetti del CSS
- espansione ed inclusione automatica del comando @import
- gratis e open source!
Il trucco funziona tramite un file da personalizzare (tramite un form online) e scaricare – in linguaggio PHP (molto semplice da installare, e portabile su qualsiasi piattaforma che viaggi con PHP), C (molto veloce, funziona su quasi ogni piattaforma *nix; un po’ meno rapido da installare, ma molto utile come interprete globale) o C# (funziona sotto -NET 2.0 in Windows, Mono e altre piattaforme; da usare se il nostro web server è IIS o basato su .NET) – che richiama il nostro personale file CSS; però il file da importare come CSS sarà il file PHP (se abbiamo scelto PHP come linguaggio):
@import "c-css.php";
I browser supportati, ed i rispettivi tag per riconoscerli sono:
- ‘IE’ – Internet Explorer
- ‘Gecko’ (Firefox, Camino etc)
- ‘Webkit’ (Safari, Shiira etc)
- ‘Opera’
- ‘IEMac’ – Internet Explorer Mac
- ‘Konq’ – Konqueror
- ‘IEmob’ – IE mobile
- ‘PSP’ – Playstation Portable
- ‘NetF’ – Net Front
È spiegato più sotto come è comunque possibile crearsi “in proprio” lo stesso meccanismo.
link: Conditional CSS
Commenti Condizionali (conditional comments)
I commenti condizionali funzionano solo su Internet Explorer per Windows, fino alla versione 9
Si tratta di inserire una condizione (IF) all’interno di un commento HTML, all’interno del codice.
Permettono comunque di distinguere le varie versioni di Explorer.
Questo tipo di commenti non solo si adattano per la scrittura di codice CSS, ma funzionano benissimo con qualsiasi cosa all’interno della pagina HTML: ad esempio, potete mostrare del testo se la condizione viene soddisfatta.
<!--[if gte IE 5]> Questa riga viene mostrata solo su Explorer 5 o successivo.<br /> <![endif]-->
! | non è… |
lt | meno di… |
lte | meno o uguale di… |
gt | maggiore di… |
gte | maggiore o uguale di… |
A parte le varie sfumature, la cosa che personalmente trovo più interessante e poter mostrare un contenuto solo per Explorer e viceversa:
<!--[if IE]>
Questo è per IE
<![endif]-->
<!--[if !IE]> -->
Questo è per tutti gli altri
<!-- <![endif]-->
Da notare anche che solo Microsoft Explorer supporta un tag particolare, cioè il tag <comment>.
Usando questo tag possiamo fare in modo che solo Explorer non mostri a video ciò che è racchiuso al suo interno.
fonte: Microsoft , conditional comments
CSS diversi a seconda del sistema operativo
Può capitare di accorgersi che qualche elemento del sito viene renderizzato in maniera differente su Windows piuttosto che su OsX…
Se abbiamo la necessità di usare CSS differenti a seconda dell’OS del navigatore (macintosh osx, windows, linux, unix) possiamo ricorrere a pochissime righe di codice Javascript:
<script>
if (navigator.appVersion.indexOf("Mac")!=-1)
document.write('<link href="mac.css" rel="stylesheet" type="text/css">');
</script>
Il codice sopra ad esempio carica il file ‘mac.css’ se l’utente che visita il sito lo fa da un computer Apple.
Allo stesso modo si può fare per gli altri sistemi operativi…
if (navigator.appVersion.indexOf("Win")!=-1) ...;
if (navigator.appVersion.indexOf("X11")!=-1) ...; //unix
if (navigator.appVersion.indexOf("Linux")!=-1) ...;
…avendo l’accortezza di inserire il ‘document.write’ opportuno dopo ognuno di essi.
Usando Javascript
Tramite un articolo di Napolux sono venuto a conoscenza di un bellissimo script preconfezionato presente nel sito di quirksmode.org – “il sito di riferimento per informazioni sulla compatibilità cross-browser” – che è fatto in javascript e permette di riconoscere il sistema operativo e il browser (versione compresa) usato dall’utente.
Tra gli altri, lo script riconosce: Chrome, Omniweb, Safari, Opera, iCab, KDE, Firefox, Ccamino, Netscape, Explorer, Mozilla, iPhone, iPod.
link: Browser detect
Usando Javascript oppure Php…
Un altro codice javascript per determinare quale browser l’utente stia usando (e, a dirla tutta, per scoprire altri dati) è usare uno script come il seguente:
if ( xxx = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 )
{
// chrome
}
Nell’esempio preso in considerazione, la variabile XXX assume il valore di ‘true’ se il browser è Google Chrome, o più precisamente: se la stringa dell’userAgent contiene la parola ‘chrome’.
Lo stesso risultato si può ottenere con Php…
if (strlen(stristr($_SERVER['HTTP_USER_AGENT'],"chrome")) >0 ) {
// chrome
}
…il che può anche aprirci altri scenari, ad esempio usando un file .php come fosse file .css; Praticamente possiamo ricrearci “in casa” lo stesso meccanismo tramite cui funziona il Conditional CSS spiegato all’inizio!
Vedete qui di seguito cosa risulta dal check browser che state usando adesso per visualizzare questa pagina, e capirete le potenzialità di questi script:
Sempre ad esempio, un codice come quello seguente, vi permette di caricare due css diversi a seconda che il browser sie MSIE o no:
<script>
if(navigator.userAgent.toLowerCase().indexOf('msie')==-1)
{document.write ("<style>@import url(contatti.css);</style>");}
else{document.write ("<style>@import url(contatti-ie.css);</style>");}
</script>
Altre maniere per…
Ho scovato anche una bellissima pagina, relativamente vecchiotta, che mostra e spiega una buona dozzina di metodi per applicare una regola CSS solamente in casi specifici (browser, os, versione, …): Essential css hacks!
Altri sono arrivati qui cercando:
http://www.dynamicdrive.com/dynamicindex9/dyncss.htm
Grazie per la dritta su IE, ho risolto tutto con le tue indicazioni!
ma dove si deve inserire il codice su descritto sul template.php oppure nel style.css oppure dove?
Ciao Maurizio,
di quale codice stai parlando?
mi spiego meglio io ho il mio file style.css dove come tutti andiamo a configurare e cambiare l’ aspetto della pagina, bene io vorrei poter avere uno style1.css per ie7
uno style2 per ie8
uno style3 per firefox
uno style 4 per ie per mac
quindi leggendomi questo articolo ho capito che bisognava prendere il file
c-css.php ed importarlo
1° non ho capito dove bisogna importarlo se nel template.php oppure nello style.css
2° le righe di codice che vado a scrivere del tipo
Questa riga viene mostrata solo su Explorer 5 o successivo.
oppure se volessi che mi caricasse un altro css per firefox
insoma sono bloccato inquesta situazione
1° se mi parli di template.php vuol dire che stai parlando di un qualche tipo di CMS (forse WordPress?) ma in questo caso non c’entra niente perchè stiamo parlando di programmazione in generale;
2° Per copiare le righe di codice devi leggere (e applicare) la nota scritta appena sopra il box dove hai scritto.
grazie del aiuto., quindi da quello che forse ho capito l’ import lo devo fare sul style.css?
e le istruzioni le vado a mettere dentro il template php.
si uso un cms ma non è wordpress ma è drupal
Ciao Maurizio,
allora, come dicevo… le regole spiegate qui sono generali, non specifiche per nessun CMS, nè WordPress, nè Drupal.
Premesso ciò, ti conviene mixare le varie tecniche – JS o php, css, html – per ottenere l’effetto che vuoi.
Ad esempio puoi usare il codice js mostrato alla fine dell’articolo per determinare il browser dell’utente, ed incrociare questa tecnica assieme a quella spiegata sotto il titolo “CSS diversi a seconda del sistema operativo”; si tratta di JS, quindi il codice andrà inserito direttamente nel file Html o Php, non nel file Css.
Un suggerimento: IE per Mac praticamente non esiste più.
grazie dell’aiuto è un idea che stava venendo anche a me il mix ma non volevo azzardare un idea malsana, per ie mac è verò ma ho notato che chi usa il mac anche con firefox ha diversa visione di uno che usa firefox per windows quindi devo riuscire a unificarli perche come accade spesso ormai ottimizo un css per due o tre browser e poi mi esce qullo che mi dice io vedo tutto male ed ha il mac
che palle
Ciao, ho apprezzato molto le soluzioni che proponi per risolvere il problema del crossbrowsing. Volevo chiederti se potevi indicarmi un buon articolo che trattasse dei problemi derivati dai diversi sistemi operativi. Mi spiego, sempre più spesso mi viene chiesto di utilizzare l’html5 e jquery o aiax. E ho notato, sopratutto per jquery, profonde differenze non solo tra i browser ma anche tra i diversi SO. Ad esempio lo stesso codice viene visualizzato in maniera differente da opera a secondo che giri su linux o su windows. Grazie.
Gio