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».
Естественно, обёртки над Вебкитом (новая «Опера», браузер «Яндекса» и прочее) стиль увидят — но на то они и обёртки.
как бы в хроме блинк.
Комментарий для zg.livejournal.com:
А в «Сафари» не Вебкит, а Вебкит-2.
Чем это тут принципиально? В новой «Опере» и браузере «Яндекса» — тоже «Блинк». Но все эти движки пока недалеко разошлись же.
Спасибо за толковое решение!!!