So, as in different browsers, for example, fonts and indents are displayed differently, you need to specify a separate Css rule for each browser.

At the moment I use the following:

// IE9+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) .div1 transform scaleX(.7) // Firefox _:-moz-tree-row(hover), .div1 transform scaleX(1) //chrome .selector:not(*:root), .div1 transform scaleX(.4)

Is there a better, more efficient and more compact way to do this? Are there any other special rules other than these three for other browsers?

  • Found browserhacks.com possible, measure for IE on @media screen and (min-width:0\0) - will it be better? It is very desirable to somehow replace * for chrome - CodeGust

2 answers 2

Separate files for each browser and their connection through JavaScript

I would make a separate css-file for each browser, then use JavaScript to determine the client’s browser , then use JavaScript to connect the corresponding file (in essence, we create the link tag).

If there are not so many rules, you can use JavaScript to create a style tag and its content (after determining the client’s browser).

Clean CSS: Conditional Browser Styles (Hacks)

If you do not want to get involved with JavaScript, there is an interesting solution within the CSS in English SO .

The essence of it is that you specify styles for each browser individually through vendor prefixes, @media or @supports :

By .selector meant the selector you need.

 /* Chrome 28+ */ @supports (-webkit-appearance:none) { /* Нужные стили */ } /* Firefox (любой) */ _:-moz-tree-row(hover), .selector { /* Нужные стили */ } /* Internet Explorer 11+ */ _:-ms-fullscreen, :root .selector { /* Нужные стили */ } /* Internet Explorer 10+ */ _:-ms-lang(x), .selector { /* Нужные стили */ } /* Также Internet Explorer 10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Нужные стили */ } /* Internet Explorer 9+ */ _::selection, .selector { /* Нужные стили */ } /* Safari 6.1+, Chrome для iOS */ @media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media { /* Нужные стили */ }}
  • Thank! It is good and true by itself, but you should hardly wish so when there are not so many separate rules for different browsers ... (?) For a few changes, it may be quite acceptable to simply enter a group of browser-oriented rules (?) . - CodeGust
  • Well, now I will add the answer. - Vadim Ovchinnikov
  • Thank you, but the point is that the architecture of the project is not particularly good for such dynamic things. There are several .styl files that are assembled into one .css work file. In this case, the css in js will be in my code a clear minus, based on the architecture of the project ... - CodeGust
  • one
    @CodeGust The only thing I can still offer such a solution in English. SO , but did not try it and it implies dependence on a third-party library, about the quality of which I do not know anything. You can also try to implement the same thing (I mean write JavaScript, which will apply selectors, for example .opera .class1 , for the Opera browser it will add the selector .class1 ). - Vadim Ovchinnikov
  • Thanks, I found the solution for IE in the link - _::selection , although the @media screen ... solution looks more reliable. I also want to find a replacement for chromeium - replace .selector:not(*:root) with something without * . - CodeGust

And what is not an option to check the browser on the server side, and connect the appropriate styles? Either build your css file based on this, deleting individual lines (if the file is going to be generated before the page is generated) / connecting separate .styl files (if the file is being collected DURING the page generation).

  • On the back end is also a good option - Vadim Ovchinnikov
  • @VadimOvchinnikov here and I think so, for me in general - perfect. Flexible logic, no restrictions, which provides css. There is no need to switch styles on the fly, IMHO the most suitable is to resolve such issues on a server - SLy_huh
  • Thank you, but, as I wrote above, the architecture of the project does not allow. There is a Gulp + WebPack collector, a clear structure of code modules. 1 module = 1.styl file, for example. Everything is collected in a 1 .css file. That's why I'm looking for the best way / hack for setting separate rules for different browsers. - CodeGust