Лучший способ указывать отдельные CSS правила для разных браузеров

Так, как в разных браузерах, например, шрифты и отступы отображаются по-разному, нужно для каждого браузера указывать отдельное Css правило.
На данный момент использую следуее:
// 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)
Есть ли лучший, более эффективный и компактный способ для этого? Есть ли еще специальные подобные правила, кроме этих трех, для других браузеров?

Ответ

Отдельные файлы для каждого браузера и их подключение через JavaScript
Я бы сделал отдельный css-файл для каждого браузера, затем с помощью JavaScript определял браузер клиента, затем с помощью JavaScript подключал соответствующий файл (по сути создаём тэг link).
Если правил не так и много, то можно с помощью JavaScript создать тэг style и его контент (предварительно определив браузер клиента).
Чистый CSS: условные стили для браузера (хаки)
Если не желаете связываться с JavaScript, есть интересное решение в рамках CSS на англ SO
Суть его в том, что вы указываете стили для каждого браузера инвидувиально через вендорные префиксы, @media или @supports
Под .selector подразумевается нужный вам селектор.
/* 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 { /* Нужные стили */ }}