» CSS diversi per browser diversi

CSS diversi per browser diversi

browsers-logos, CSS diversi per browser diversi

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.

Le statistiche ci dicono pressappoco che il 64% dei navigatori viaggia su Windows+Explorer e il 24% usa Windows+Firefox, quindi abbiamo ancora un bel motivo per preoccuparci di come Internet Explorer visualizza il nostro sito.

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

link: Conditional CSS

Commenti Condizionali (conditional comments)

I commenti condizionali funzionano solo su Internet Explorer 5 e successivi, e su sistema operativo Windows.
Si tratta di inserire una condizione (IF) all’interno di un commento HTM, 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]-->

link: conditional comments

Collegamenti sponsorizzati:

Se l'articolo ti è piaciuto è sempre graditissimo un commento! Se vuoi ricevere le ultime novità dal mio blog puoi anche iscriverti ai Feed RSS (non si paga!). Anche via email. CIAO!!