different width for different browsers

–2 votes
asked Apr 8, 2017 by manoj

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.

2 Answers

0 votes
answered Apr 8, 2017 by yuval

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.

+1 vote
answered Apr 8, 2017 by samjakob

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

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...