Opera 12 CSS hack

Вышла «Опера» 12, многое поменялось, на некоторых моих сайтах едут стили. В частности, на «Маке» «Опера» поменяла поведение стиля «font-size: 0» — теперь он отображается шрифтом какого-то минимального размера.

Пришлось придумывать ЦСС-хак для этой версии. Я не могу себе позволить искать новое решение и заново тестировать его во всех браузерах, мне проще оставить всё как есть, сделав исключение.

Хак получился вот такой:

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, body { /* стиль только для Opera 12.00+ */
        background: red;
    };
}

Соответственно, на место «body» надо поставить требуемый тег или селектор.

Поделиться
Отправить
36 комментариев
rmcreative.ru

Красивый префикс вышел _:-o

Михаил Калашник (splurov.livejournal.com)

А как воспроизвести проблему с font-size: 0?
http://jsfiddle.net/S829u/  — не воспроизводится, выглядит одинаково в FF и Opera.

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

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

У меня по-разному выглядит. В FF 11 и 12 одна надпись, в «Опере» 12 — две.

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

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

В FF 13.0.1 тоже одна надпись.

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

Комментарий для rmcreative.ru:

Красивый префикс вышел _:-o

:-D

Михаил Калашник (splurov.livejournal.com)

На винде в 12 опере так же как в ФФ, на маке в 11.64 пустая строка.

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

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

Вот же блин. Значит придётся искать более универсальное решение.

SelenIT

Разве это что-то новое? Если ничего не путаю, еще «Opera 9» (или какая-то подобная) не давала скукожить текст меньше, чем до 6 пкс (это где-то настраивалось, но по умолчанию было так). А вебкитные пару лет назад при font-size: 0 оставляли по пикселю на месте пробела и пустой строки. Мне кажется, полагаться на font-size:0 вообще особо не стоит, тем более даже в спецификации на эту тему ( http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size ) стоит отдельный «Note 1».

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

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

Предыдущая «Опера» на «Маке» у меня вполне давала кукожить.

fatal.myopenid.com

Надо было производителям браузеров договориться до какого-то разумного общего решения. Например, при нулевом размере -​-​ «кукожить», при любом выше нуля по усмотрению браузера и настроек пользователя.

Kildor (kildor.ya.ru)

Preferences » Advanced » Fonts » Minimum font size (pixels) — если выставить 0, то всё скукоживается. Если выставить число — то кукожит до этого числа, и не меньше. По мне так это логично.

Михаил

Круто же!

Сергей

Большое спасибо! Порылся в интернете, до сих пор решений никто не написал. Нашёл только на вашем сайта действительно работающее решение!

Сергей

Подскажите, сейчас посмотрел, теперь у меня лишний отступ в 1 пиксель появляется в гугл хром, может я что-то не так сделал? В общем смысл такой что мне в опере надо слева сделать отступ в 1 пиксель, вот что я написал:

@media (min-resolution: .001dpcm) {

{padding-left:1px;}

}

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

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

Используйте стиль полностью:

@media (min-resolution: .001dpcm) {
_:-o-prefocus, .pad {padding-left:1px;}
}

Сергей

Исправил, в опере так же как и в предыдущем варианте, что я написал выше работает хорошо, а в гугл хром теперь лишний отступ в 1 пиксель появляется.

Сергей

Решение придумал, пришлось добавить ещё и хак для хрома

@media screen and (-webkit-min-device-pixel-ratio:0) {

{padding-right:1px;}

}

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

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

У вас появился отступ вот с этим хаком? http://bolknote.ru/all/3675/#n36088

Испытал только на «Хроме», всё ок, не срабатывает, работает только на «Опере».

Сергей

Да, с этим хаком на хроме отступ появился справа.

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

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

Ну, вы вроде именно это и хотели?

Сергей

Не совсем...у меня появлялся почему-то лишний отступ слева в опере. Вчера обнаружил, что старый хак для оперы перестал работать. Нашёл ваш хак, поставил, в опере он заработал, НО при этом он оказывается влияет и на хром ещё, так как у него этот оступ стал уже лишним, поэтому пришлось отдельно ещё хак для хрома ставить.

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

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

Вы просто мой хак не до конца написали, я же написал что у вас неправильно.

Сергей

Я потом исправил хак так как вы написали и всё равно в хроме этот отступ появляется. Кстати, хак даже работал без той части кода, который вы дописали.

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

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

Я потом исправил хак так как вы написали и всё равно в хроме этот отступ появляется.

Какая версия «Хрома»?

Кстати, хак даже работал без той части кода, который вы дописали.

Конечно, только он сразу перестаёт быть хаком для «Оперы» и начинает работать под ещё кучей браузеров.

Сергей

В справке написано, что стоит последняя версия 21.0.1180.89. Ну с правильным хаком, что вы исправили всё равно в хроме отступ появляется.

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

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

У меня тоже 21.0.1180.89. Вот этот стиль:

@media (min-resolution: .001dpcm) {
_:-o-prefocus, body {background: red;}
}

Не даёт нигде, кроме «Оперы» красного фона.

Сергей

Странно, у меня вот почему то реагирует на хром.

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

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

Ничего не могу сказать. Все три хрома, которые я посмотрел, работают одинаково, а версия совпадает с вашей.

Света

Спасибо, очень помогло!

Red Vulps

Grettings from Brazil. Thanks for the tip.

Edward-burya

Не работает с ховером..

надо прописать под оперу для меню хак не большой.

@media (min-resolution: .001dpcm) {

    _:-o-prefocus, .sub-menu .menu-item a:hover { /* стиль только для Opera 12.00+ */
        margin-left:1px;;
    };

}

стиль с ховером не работает, без ховера все гуд. В чем может быть трабла?

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

Комментарий для Edward-burya:

Вот уж не знаю, я попробовал, работает.

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

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

Grettings from Brazil. Thanks for the tip.

Welcome :)

Russell Crow

I’m trying to restyle a website and the opera hack *noindex:-o-prefocus, #footer{ }* works in Opera 12 on all the pages of my website except one. Can anyone help?

     

Russell Crow

A little more information about my Opera 12.00 problems. Opera will read the opera hack ...
noindex:-o-prefocus, #footer{
 rules: etc;
}

just fine on any other page but one. On the particular page I’m having trouble with it want’s to read an unhacked .selector. I’m using Opera 12.00 to edit my html page, but when I make changes in that page or in the CSS and I try to refresh the page to see how the changes took effect. Opera then labors to to read the page. I have even created a new page and then inserted the code for the page and that doesn’t help. I’ve inserted html code from another page and then made changes to the classes if there were any differences in the two pages that still doesn’t help.

I have even downloaded a copy of an older version of Opera 10.62 and still no change.

Can anyone tell me what is happening with my Opera browser. I have never seen this before.

Thanks
Russ

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

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

It should be some Opera bug. Why do you still use this ancient browser? Give it up :)

Популярное