Лучший способ указывать отдельные 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 файлы(если файл собирается
ВО ВРЕМЯ генерирования страницы).

Как изменить переменную в зависимости от разрешения экрана? stylus

Использую stylus. Есть переменная $font-size = 1em, которая используется везде по проекту. Нужно, чтобы на мелких девайсах (@media screen and (max-device-width: 768px)), $font-size поменялся на 2em. Попробовала использовать if, не сработало

Ответ

Вы слишком многого хотите от препроцессоров. Насколько мне известно, такое их поведение не регламентировано правилами. Желаемого вами поведения можно добиться при помощи custom properties
:root { --fz: 2em; } .block { font-size: var(--fz); } @media (max-width: 700px) { :root { --fz: 1em; } }

This is text

При помощи препроцессоров надо создавать миксины с нужными вам свойствам, передавать в них переменные, а в медиа-выражениях вызывать миксины заново с новыми значениями переменных, чтобы переопределить свойства. Например так:
my-custom-block(fz) border-radius 5px border 1px solid font-size fz margin fz
my-custom-block(2em)
@media screen and (max-width: 700px) my-custom-block(1em)

Лучший способ указывать отдельные 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 { /* Нужные стили */ }}