Riconosci il Browser con i CSS

Riconosci il Browser con i CSS

Riuscire a riconoscere il browser utilizzato non è mai stato un compito semplice, tempo fa abbiamo parlato della libreria Modernizr ma oggi voglio mostrarti alcune soluzioni per riconoscere un browser direttamente dal codice CSS.  

Speravi che con la morte di IE6-7 non ci fosse più bisogno di hack css vero?

Purtroppo non è così…

Millemila Browser

Con il mobile si sono creati nuovi problemi per gli sviluppatori, versioni di WebKit differenti (da Android a iOS) che presentano implementazioni differenti per alcune cose dagli input type supportati al motore JS usato, oppure comportamenti diversi tra Chrome e Firefox.

PS: Non dimentichiamoci di Internet Explorer Mobile!

Quindi?

Gli hack di una volta erano piccoli pezzi di CSS che risolvevano bug specifici, oggi grazie ai reset dei framework (leggi l’articolo precedente) o a librerie JavaScript, questi problemi vengono risolti in modo trasparente per lo sviluppatore.

Gli hack di oggi invece sono delle media queries che permettono di inserire codice specifico a seconda del browser in cui bisogna agire per risolvere eventuali problemi.

Per semplificarci la vita qualcuno ha fatto una raccolta degli hack (http://browserhacks.com/) per riconoscere tramite CSS il browser.

L’indispensabile per me

Io lavoro con Firefox e spesso noto problemi con WebKit quindi sfruttando una media query, come quella che trovi in basso, posso mettere del CSS specifico per questo motore grafico:

Se lavori in ambiente WebKit potrebbe serviti una cosa opposta (ma spero per te nessun hack per IE, ce ne sono troppi da usare!).

Non posso farti qualche esempio diretto perchè le volte che ho avuto bisogno di questo trucchetto è stato per risolvere un problema isolato. Si tratta sempre di un font che su Firefox viene visualizzato a certe dimensioni mentre su Webkit, per mantenerlo uguale, devo farlo un pixel minore. Questo aggiustamento comporta poi tutta una serie di modifiche creando delle regole specifiche solo per Webkit.

Bootstrap 3 ha rimosso il supporto per IE 6-7-8! Per un mio lavoro ho dovuto fixare strani comportamenti e ci sono riuscito propriograzie a questi hack. Inoltre, è necessario inserire respond.js per abilitare le medie queries, ma ti rimando alla documentazione per approfondire il supporto browser.

Un esempio

Sfruttando i selettori presenti nella raccolta ho fatto una piccolo demo.
Come puoi vedere cliccando sulle schede HTML e CSS non ho fatto altro che creare tre div, uno per browser, e poi nasconderli. Con i selettori specifici sono in grado di mostrarli a seconda del browser che stai utilizzanto, prova per credere!

Quale mi consigli?

Ti suggerisco, prima di tutto, di testare il tuo sito su più browser per vedere come si comporta ed evitare spiacevoli telefonate da clienti o utenti che hanno problemi con il loro (e che forse non sanno nemmeno quale usano).

Verificato il problema, sfrutta un hack riconosciuto dal browser che ti sta facendo perdere il senno in questione cercandolo in questa raccolta.

Il sito si naviga in modo molto veloce grazie al cerca posizionato in alto!

BrowserHack ti ricorda che questi hack vanno bene solo per risolvere eventuali problemi non per verificare che browser e versione usa il visitatore.
Per questo ci sono delle librerie come Modernizr che verificano le feature/supporto del browser!

Perchè e cos’è la feature detection?

Per non impazzire!

Prima si sapeva che le versione IE 6-7 avevano problemi con le png trasparenti quindi con un hack CSS o librerie JavaScript, si risolveva facilmente la questione.

Oggi invece con il continuo aggiornamento dei browser e l’integrazione di feature come WebRTC o le animazioni CSS è più pratico verificare singolarmente cosa supporta il browser piuttosto che andare a selezionare una per una le varie caratteristiche.

Con questo sistema il controllo è più veloce, preciso e fà solo il necessario alleggerendo il carico su browser non tanto performanti (stai pensando a Internet Explorer vero?).

Modernizr è la più usata ed inserisce automaticamente nel body delle classi css che informano cosa supporta il browser, inoltre è possibile fare invocazioni tramite JavaScript per verificare le feature. Ma se vuoi approfondire questi concetti abbiamo un altro articolo che potresti leggere.

Quale hack supporta il tuo browser?

Browserhacks fornisce una pagina in cui sfrutta i suoi hack per evidenziare quelli supportati dal browser che stai usando.

La raccolta inoltre dimostra che alcuni hack, che funzionano su tutti i browser, potrebbero funzionare anche su alcune versioni specifiche di IE perchè questo browser è/era un po’ buggato, è quindi possibile incappare in queste regole dallo strano comportamento.

Perchè non ti suggerisco niente?

Non ti suggerisco niente non perchè non voglio aiutarti bensi perchè non saprei come fare oltre che consigliarti questa galleria di hack.
Come ho detto sopra, i nuovi framework risolvono diversi problemi con i loro reset e solo un testing del tuo codice CSS può permetterti di individuare i problemi non ancora risolti. Per fortuna nostra, nuovi browser oramai hanno un comportamento standard ed è raro trovare dei problemi recidivi.

Datti da fare e non scordati di testare il sito su più browser!

Conclusione

Non abusare di questi hack, ma sfruttali solo quando quel margin che su un browser è perfetto su un’altro è troppo piccolo!

Codice pulito e facile da mantenere nel futuro, questo deve essere il tuo motto in un periodo di fermento nel web dove nascono tecnologie nuove sempre più frequentemente.

Stavo quasi per dimenticare, su BrowserHacks troverai anche dei codici JavaScript che sono in grado di fare la stessa cosa, esempio identificare il browser utilizzato.

Lascia il tuo Pensiero