How to Provide CSS Properties for Different Browsers Like Mozilla and Chrome

How to provide CSS properties for Different browsers like Mozilla and Chrome

Using CSS Media Queries (Chrome/Safari)

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

Chrome/Safari specific css file (Chrome/Safari)

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

Here is a CSS Hacks list

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/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 *> #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 */

How to apply the same CSS property to different browser(Chrome,IE)

You should place both items in the CSS file, like this:

.my-class {
  display: -ms-inline-grid;
  display: inline-grid;
}

Always place browser specific settings first, then the default. This way, if the browser supports the default setting, it will use it. Otherwise, it will pick up the browser specific setting, then ignore the unknown settings that come after it.

How to write specific CSS for mozilla, chrome and IE

For that

• 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

Using PHP

See

• 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)

Then then create the dynamic CSS file as per the detected browser

Here is a CSS Hacks list

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/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 *> #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 */

Source: http://paulirish.com/2009/browser-specific-css-hacks/

If you want to use Plugin then here is one

http://rafael.adm.br/css_browser_selector/

How to change CSS class width property for different browsers i.e., IE, Chrome, Firefox?

Edit: I know using browser-specific CSS is highly discouraged but this is to answer the question - in case someone else needs this, and specifically this.

Without using JavaScript, I know you can target Internet Explorer and Firefox (Chrome-only seems plausable) but I have my doubts about the Safari method.

Internet Explorer: (https://css-tricks.com/how-to-create-an-ie-only-stylesheet/)

HTML (yes, it's meant to be commented out):

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Google Chrome (and Safari or other Webkit)

I forgot to get the URL... sorry

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  /* CSS CODE */
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    /* CSS CODE */
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     /* CSS CODE */
  );} 
}

Safari Only - Questionable

This one apparently works with Safari 9.0+ but I'm not that sure about this one. https://stackoverflow.com/a/23948854/2872279

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

Mozilla Firefox

Targeting only Firefox with CSS

@-moz-document url-prefix() {
    /* CSS Code */
}

If you are using JavaScript, I'd recommend just using this tool (I didn't look into it that much but I believe it uses the User Agent):
http://rafael.adm.br/css_browser_selector/

Otherwise, you could just use PHP or some other language and get it by user agent.

Another Edit: I've just noticed that someone has also posted a nice hacks list for CSS - so I'll refer you to their answer: https://stackoverflow.com/a/4332138/2872279

Apply different CSS in different browser

There is a good article about how to apply different styles for different browsers.

So code can look like this:

/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .foo {
      background: lightgreen;
  }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
  .foo {
      background: lightgreen;
  }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .foo {
      background: lightgreen;
  }

}

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

Different CSS for each browser?

Ideal solution you want does not exist:

Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

So the best solution:

How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing 'chrome' with 'mozilla', 'explorer' and so on...

Then to add your css files, just follow up with conditional statements like so:

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

Good luck and hope this helps!

how to write browser specific css properties?

You can use jquery to apply different css classes

if($.browser.msie){
$("#someDiv").addclass("SomeClass");
}

$.browser.msie is for Internet Explorer

$.browser.chrome for chrome

$.browser.mozilla for mozilla

$.browser.safari for safari

$.browser.opera for opera

This way would give you flexibility when it comes to problems based on positioning

reference : http://api.jquery.com/jQuery.browser/

---

Related Topics