Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For that</p> <p>You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles You can use various CSS Hacks for specific browser Or Scripts or Plugins to indentify the browser and apply various classes to the elements</p> <h2>Using jQuery</h2> <p>What you're after is known as browser detection:</p> <pre><code>if ($.browser.mozilla) { ... </code></pre> <p>However, browser sniffing is discouraged, as its easy to spoof the user agent, i.e. pretend to be another browser!</p> <p>You'd best use feature detection, either in your own way, or through the jQuery.support interface: <a href="http://api.jquery.com/jQuery.support/" rel="nofollow">http://api.jquery.com/jQuery.support/</a></p> <p>Here's an article on extending it for your own use: <a href="http://www.waytoocrowded.com/2009/03/14/jquery-supportminheight/" rel="nofollow">http://www.waytoocrowded.com/2009/03/14/jquery-supportminheight/</a></p> <h2>Using PHP</h2> <p>See</p> <pre><code>http://php.net/manual/en/function.get-browser.php http://techpatterns.com/downloads/php-browser-detection-basic.php http://techpatterns.com/downloads/php_browser_detection.php (contains JS also) </code></pre> <p>Then then create the dynamic CSS file as per the detected browser Here is a CSS Hacks list</p> <h2>Selector Hacks</h2> <pre><code>/* 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="nofollow">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="nofollow">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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    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