Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For that</p> <ul> <li>You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles</li> <li>You can use various CSS Hacks for specific browser</li> <li>Or Scripts or Plugins to indentify the browser and apply various classes to the elements</li> </ul> <h2>Using PHP</h2> <p>See</p> <ul> <li><a href="http://php.net/manual/en/function.get-browser.php" rel="noreferrer">http://php.net/manual/en/function.get-browser.php</a></li> <li><a href="http://techpatterns.com/downloads/php-browser-detection-basic.php" rel="noreferrer">http://techpatterns.com/downloads/php-browser-detection-basic.php</a></li> <li><a href="http://techpatterns.com/downloads/php_browser_detection.php" rel="noreferrer">http://techpatterns.com/downloads/php_browser_detection.php</a> (contains JS also)</li> </ul> <p>Then then create the dynamic CSS file as per the detected browser</p> <h2>Here is a CSS Hacks list</h2> <pre><code>/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html&gt;body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html&gt;/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *&gt; #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */ </code></pre> <p>Source: <a href="http://paulirish.com/2009/browser-specific-css-hacks/" rel="noreferrer">http://paulirish.com/2009/browser-specific-css-hacks/</a></p> <h2>If you want to use Plugin then here is one</h2> <p><a href="http://rafael.adm.br/css_browser_selector/" rel="noreferrer">http://rafael.adm.br/css_browser_selector/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload