-2

I want to have different widths in different browsers. this i want to control with css.

Ex:

.className{ width: 100px; }

but for chrome Ex:

.className{ width: 110px; }

for mozilla Ex:

.className{ width: 120px; }

Thanks in advance.

Manoj
  • 97
  • 1
  • 4
  • 11
  • Its not a good practice to having different css based on browser. – Sumit Gulati Apr 08 '17 at 15:43
  • Refer http://stackoverflow.com/questions/5621749/how-do-i-detect-the-user-s-browser-and-apply-a-specific-css-file – Sumit Gulati Apr 08 '17 at 15:44
  • @Sumit Gulati, I want to have in same class name in same file. – Manoj Apr 08 '17 at 15:47
  • 1
    Finding ways to target specific browsers or browser versions is discouraged because: a) there's no fail-proof method of getting current browser and version; b) whatever works today will not work tomorrow. You can't keep such a practice up to date. So your current approach will fail. It's not a matter of ***if***, but ***when*** and ***how often***. It is a lot easier to find the reason why you need to have different widths in different browsers and fix that. – tao Apr 08 '17 at 15:49
  • @Manoj Check the above comment by Andrei and refer the link. Find better way to solve the issue. The above solution can break anytime on different version of same browser. – Sumit Gulati Apr 08 '17 at 15:51
  • Not recommended, though this site have everything you need: http://browserhacks.com/ – Asons Apr 08 '17 at 16:22
  • It is not good practice to do so, and please give us code example of yours when you asking for question – Milan Apr 08 '17 at 16:30

2 Answers2

2

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

Community
  • 1
  • 1
NBTX
  • 581
  • 1
  • 8
  • 24
0

Using browser specific css is highly discouraged.

Instead there are other methods of adapting your styling to different environments. The use of 100px in a property like width is problematic. If you want a part of your application to be at some width you can do one of the following:

  1. Use relative units like 50% or 1.2em etc'. Here is a great place to start reading about relative css units.

  2. Use CSS Flexbox

  3. Use one of the many grid systems out there. Most of them allow you to split the screen to a logical rows and columns and then specify how is your element is placed on the grid. For example here is bootstrap's grid system.

yogi
  • 1,327
  • 2
  • 12
  • 33