Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Chrome (but not Safari) CSS hack

Обратил внимание, что половина интернета сбилась с ног в попытках найти стильевой хак для «Хрома», который не срабатывал бы в «Сафари». Неясно почему его ещё никто не придумал, у меня на это ушла пара минут:

@supports (top: 0__qem) {
    .chrome-only {
        border: 1px solid #000; /* стиль только для Chrome (не Safari) */
    }
}

Работает начиная с 28-го «Хрома» и не работает на «Сафари» (включая последнюю версию 7.0.5). Принцип простой, как чихание — «Сафари», даже самый свежий, не поддерживает конструкцию «@supports», правда её поддерживает Файерфокс и зомби «Оперы».

Эта стандартная конструкция предназначена для проверки — поддерживает ли браузер указанное свойство. Недостаточно подставить туда свойство с префиксом webkit — сейчас многие браузеры читают такие свойства как свои, над что-то иное.

Чтобы отсечь лишнее, я использую нестандартную единицу измерения Вебкита — «__qem», я о ней писал несколько лет назад. Вместе получается, что стиль в «Сафари» не срабатывает, потому что тот не поддерживает «@supports», а в остальных браузерах — потому что они не поддерживают «__qem».

Естественно, обёртки над Вебкитом (новая «Опера», браузер «Яндекса» и прочее) стиль увидят — но на то они и обёртки.

3 комментария
zg (zg.livejournal.com) 2014

как бы в хроме блинк.

Евгений Степанищев (bolknote.ru) 2014

Комментарий для zg.livejournal.com:

А в «Сафари» не Вебкит, а Вебкит-2.

Чем это тут принципиально? В новой «Опере» и браузере «Яндекса» — тоже «Блинк». Но все эти движки пока недалеко разошлись же.

Andrey 2015

Спасибо за толковое решение!!!