Come a Target Chrome solo con i CSS

April 7

Come a Target Chrome solo con i CSS


CSS può creare incredibili effetti visivi e persino indirizzare i browser specifici basati su un sistema di media query. Questi media query consentono di creare diversi elementi del foglio di stile basate su dettagli come la risoluzione dello schermo, del browser motore di rendering o addirittura tipo di computer. La media query che consente di specificare il browser Chrome si rivolge in realtà sia Chrome e Safari, identificando i browser utilizzando WebKit. Fino a quando Chrome si allontana da WebKit - una mossa imminente - non ci sarà un metodo di mira solo gli utenti Chrome con i CSS.

istruzione

1 Aprire il foglio di stile per il tuo sito con un editor di codice di scelta. Questo può essere un programma di Web design come Dreamweaver, un editor come Eclipse o anche un editor di testo come Blocco note. Non utilizzare ricco editor di testo o word processor, in quanto possono rompere la sintassi di HTML e CSS.

2 Aggiungere una sezione al CSS che assomiglia a questo:

schermo @media e (-webkit-min-device-pixel-ratio: 0) {

}

Questa interrogazione si rivolge browser utilizzando WebKit, che comprende sia Chrome e il browser Chromium open-source, Safari e derivati ​​Safari, come Midori.

3 Aggiungere eventuali modifiche Chrome-only CSS tra le staffe. Nulla all'interno di queste parentesi verrà visualizzato dagli utenti su Internet Explorer, Firefox o altri browser non WebKit.

4 Salvare il CSS e provarlo sul computer locale per assicurarsi che funzioni.

Consigli e avvertenze

  • Quando si aggiungono i CSS mirato a qualsiasi sito web, valutarne l'utilità. Solo perché un hack è fresco non significa che è necessario.
  • Questo metodo funziona a partire da maggio 2013. Si prevede Chrome per passare al motore di rendering Blink nel 2013; quando si verifica questo cambiamento, la query WebKit non funziona sui browser Chrome. Non ci sono notizie su ciò interrogazione lo sostituirà.
  • Solo perché è nascosto per i browser non-WebKit non significa che il vostro Chrome solo CSS è un segreto; chiunque guardando il tuo foglio di stile sarà in grado di vedere il CSS.