Oggi voglio condividere con te un recente caso in cui ho dovuto specificare una proprietà css solo per Chrome e Safari.
Quasi sempre quando sviluppiamo un sito in html e css la visualizzazione sui diversi browser non crea problemi, ad eccezione di IE. Però appunto quasi sempre.
In un recente progetto, mi è capitato che per un pixel una foto non si allineava correttamente solo in Chrome e Safari.
Cosa fare in questi casi? Esiste un hack CSS che permette di specificare la proprietà interessata solo per i browser che utilizzano webkit.
Nel tuo foglio di stile basterà aggiungere queste semplici righe di codice.
/*codice css generale per il div #div-id */
#div-id {
margin:10px auto;
width:960px;
height:auto;
background: #333; }
/*codice css specifico per chrome e safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#div-id { margin-top: 11px; }
}
In questo caso verrà applicato un margine superiore di 11px al div #div-id, solo per i browser Chrome e Safari.
Conoscevi questo hack? Ti è mai capitata una situazione simile alla mia?
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
fedeweb on 
25 maggio 2011 at 10:42
Molto interessante, ma non esiste un hack simile anche per Opera?
30 giugno 2011 at 20:37
Grande Fede! Questa mi è nuova e mi serve! Da dove l’hai tirata fuori?
4 luglio 2011 at 23:19
Ciao Victor! mah cercando su google
10 luglio 2011 at 19:24
E’ possibile utilizzare questo hack solo per safari e non per chrome??
26 luglio 2011 at 17:02
Chi tace accosente….
31 luglio 2011 at 14:50
Anch’io ho avuto lo stesso problema nel caso di due div sovrapposti. Perfetti in Firefox e (incredibilmente) IE, ma sfalsati in Chrome e Safari. Conoscevo già la possibilità di utilizzare -webkit con HTML5 ma finora lo avevo utilizzato soltanto per effetti particolari, come border radius o background sfumato. Avevo intuito che la soluzione fosse usare questo comando, ma non sapevo come applicarlo al margin e tu mi hai fornito la soluzione! Grazie mille!
7 settembre 2011 at 10:38
Grazie per questa hack..
Ho un problema di interpretazione di una direttiva css da parte di chrome e safari, però solo su Mac.
Esiste una maniera per specificare la proprietà interessata solo per i browser chrome e safari che girano su sistemi Apple?
Grazie
22 gennaio 2012 at 12:41
Grazie mille del vostro post. Mi avete risolto un problema grosso che affliggeva il mio sito visualizzato con Safari (soprattutto da iDevice).
Saluti
23 gennaio 2012 at 10:38
Ciao Stefano e benvenuto nel blog
Mi fa molto piacere che questo hack ti sia servito!
25 gennaio 2012 at 13:03
Grazie Fede, mi è capitata la stessa cosa tua ed ho risolto con il tuo preziosissimo hack
Thanks !
Manuela
28 gennaio 2012 at 10:14
Ciao Manuela, ottimo mi fa piacere che ti sia servito
6 febbraio 2012 at 11:15
grazie!! hack utilissimo
Vania