How to Write Specific CSS For Mozilla, Chrome and Ie

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/

Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

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.

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

How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

You can use IE conditional comments such as this:

<!--[if IE]>
    According to the conditional comment this is IE<br />
<![endif]-->

So you could use something like this:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 10]>
        <link href="iestyles.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>

You can learn more about them here

How to target only IE (any version) within a stylesheet?

Internet Explorer 9 and lower :
You could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to specifically target.like below using external stylesheet.

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

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 :
Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : Can use the @supports rule
Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline rule IE8 detection

I have 1 more option but it is only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

As you specefied for embeded stylesheet. I think you need to use media query and condition comment for below version.

How to Write Specific CSS For Mozilla, Chrome and Ie