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

#css #кроссбраузерность #stylus

Так, как в разных браузерах, например, шрифты и отступы отображаются по-разному,
нужно для каждого браузера указывать отдельное 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)


Есть ли лучший, более эффективный и компактный способ для этого? Есть ли еще специальные
подобные правила, кроме этих трех, для других браузеров?
    

Ответы

Ответ 1

Отдельные файлы для каждого браузера и их подключение через 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 {
  /* Нужные стили */
}}


Ответ 2

А чем не вариант проверять браузер на стороне сервера, и подключать соответствующие
стили? Либо собирать ваш css файл исходя из этого, удаляя отдельные строки(если файл
собирается ДО генерирования страницы)/подключая отдельные .styl файлы(если файл собирается
ВО ВРЕМЯ генерирования страницы).