Fw

Wordpress Creative Developer

CSS Hack: Proprietà CSS solo per Chrome e Safari

  • Html Css
  • -

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.

Css Hack per Chrome e Safari

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?

15 Commenti

  1. Molto interessante, ma non esiste un hack simile anche per Opera?

  2. Grande Fede! Questa mi è nuova e mi serve! Da dove l’hai tirata fuori?

  3. Ciao Victor! mah cercando su google 😉

  4. E’ possibile utilizzare questo hack solo per safari e non per chrome??

  5. Chi tace accosente….

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

  8. Grazie mille del vostro post. Mi avete risolto un problema grosso che affliggeva il mio sito visualizzato con Safari (soprattutto da iDevice).
    Saluti

    • Ciao Stefano e benvenuto nel blog 😉

      Mi fa molto piacere che questo hack ti sia servito! 😉

  9. Grazie Fede, mi è capitata la stessa cosa tua ed ho risolto con il tuo preziosissimo hack 🙂

    Thanks !
    Manuela

  10. grazie!! hack utilissimo 🙂

    Vania

  11. Ciao Fede, grazie per la dritta! Ma se volessi applicare uno stile solo per safari? So che condivide lo stesso motore grafico con chrome, ma non c’è nessun modo per distinguere i due browser?

    • Ciao Roberto e benvenuto nel blog.

      Scusa per il ritardo nella risposta. Ho trovato questo link, dove ci sono tutti gli hack possibili per tutti i browser.

  12. Grazie mille, stavo impazzendo! 🙂

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *