Giko's

CSS hacks

Chi lavora con i css si trova spesso a dover affrontare problemi di cross browser. Con un po’ di esperienza e conoscenza delle differenze tra i vari browser è possibile prevedere i problemi e evitarli con strutture html adeguate, ma non sempre è possibile, per esempio lavorando con i form e i campi di input.

I modi per risolvere i vari problemi sono principalmente due: creare dei css con le correzioni inclusi sono nei browser specifici tramite lettura dello user-agent, commenti condizionali html o simili, oppure sfruttare dei trucchetti per inserire nello stesso css proprietà interpretate solo da determinati browser. La prima soluzione è forse più pulita, ma tende a separare gli stili dello stesso elemento in punti differenti, la seconda permette di tenere nello stesso posto gli stili comuni ma tende ad inserire codice abbastanza illeggibile.

Ecco una lista che vi può tornare utile se decidete di usare la seconda strada. La lista è stata tradotta dal blog di Paul Irish, in particolare su questa pagina.

Hack basati sui selettori

* html #id {} IE6-
*:first-child+html #id {} IE7
html>body #id {} IE7, FF, S, O
html>/**/body #id {} IE8, FF, S, O (tutto tranne IE6,7)
html:first-child #id {} O9.27-, S2
html[xmlns*=""] body:last-child #id {} S2, S3
body:nth-of-type(1) #id {} S3+, GC1+, O9+, FF3.5+
body:first-of-type #id {} S3+, GC1+, O9+, FF3.5+
@media screen and (-webkit-min-device-pixel-ratio:0) { #id {} } S3+, GC1+
@media screen and (max-device-width: 480px) { #id {} } iPhone / mobile webkit
html[xmlns*=""]:root #id {} S2, S3.1
*|html[xmlns*=""] #id {} S2, S3.1, O9.25
:root *> #id {} Tutto tranne IE6 e IE8
*+html #id {} IE7
#id, x:-moz-any-link {} FF1+
#id, x:-moz-any-link, x:default{} FF3.0+
body:not(:-moz-handler-blocked) #id {} FF3.5+

Hack basati sugli attributi

_color: blue IE6
*color: blue; oppure #color: blue IE6, IE7
color/**/: blue Tutto tranne IE6
color: blue\9; IE6, IE7, IE8, e a volte IE9
color/*\**/: blue\9; IE7, IE8
color: blue !ie; IE6, IE7 — funziona come !important
color: blue\0/; IE8, IE9

posted in css, hacks on 7th October 2012