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

CSS хак для WebKit («Хром» и «Сафари») через «__qem»

Я тут понял, что CSS Unit «__qem» вполне себе подходит на роль CSS-хака для браузеров на основе WebKit. Правда, мне неизвестно в какой версии эта единица измерения появилась. Подходит, правда не во всех случаях и с некоторыми оговорками.

Во-первых, лучше всего применять этот хак в режиме совместимости со стандартами, иначе Internet Explorer не обращает на хак никакого внимания и не отфильтровывается (впрочем, это обходимо, но неудобно).

Во-вторых, подходят свойства где есть что указать в численных единицах. Для того, чтобы хак сработал, нужно поставить на место числового параметра, например, «0__qem», а на место остальных — то, что необходимо. В некоторых случаях, есть возможность подправить потом и числовой параметр.

К примеру:

div {
    background: #000; /* фон будет чёрным везде, кроме… */
    background: 0__qem #fff; /* …WebKit, тут он будет белым */

    border: 0; /* бордюра не будет, кроме… */
    border: 0__qem solid black; border-width: 10px; /* …WebKit, тут будет чёрный толстый бордюр */

    position: relative; /* блок будет виден везде, кроме… */
    top: -100000_qem; /* …WebKit, тут его видно не будет */
}

Я попробовал поиграть с Media Queries, скомбинировать с «__qem» не удалось, но зато выяснилось, что браузеры и тут стандарт нарушают:

@media (color: 0!) {
     /* работает в «Хроме», по крайней мере, в 6-м */
}

@media (color: 0_) {
    /* работает в «Опере», по крайней мере, в 10.60 */

@media {
   /* работает в «Опере» 10.60, «Хроме» 6, не работае в FF4, IE8, IE9PP2 */
}
}

Судя по всему, эта нестандартная единица измерения не распознаётся в медиа-запросах, а жаль, получились бы хорошие хаки.

6 комментариев
gordi http://tirfler.ru/blog/ 2010

C удовольствием слежу за сериалом «CSS hack» :)
Есть более простые хаки:

IE8 — .XXX {color:#00f\0/;}

OPERA10.10+ и IE8 — .XXX {color:#00f\0;}

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

Комментарий для gordi http://tirfler.ru/blog/:

Первый работает во всех режимах?

gordi http://tirfler.ru/blog/ 2010

Комментарий для Евгения Степанищева:

Все браузеры стоят по дефолту, никаких дополнительных настроек.

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

Комментарий для gordi http://tirfler.ru/blog/:

Да нет, работает ли первый хак только в quirks или в strict тоже?

Stas 2012

А если в процентах надо выразить, напр. height: 75%, только в webkit, тогда как быть?

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

Комментарий для Stas:

Использовать другие хаки.