CSS diversi per browser e Os diversi

web browser e css differenti

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:
css explorer, css diversi per browser, css per explorer, html non per explorer.

10 pensieri su “CSS diversi per browser e Os diversi”

      1. 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. 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.

          1. 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

  1. 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ù.

    1. 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

  2. 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.