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

Opera 12 CSS hack

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

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

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

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

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

36 комментариев
rmcreative.ru 2012

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

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

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

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

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

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

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

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

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

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

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

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

:-D

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

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

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

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

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

SelenIT 2012

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

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

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

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

fatal.myopenid.com 2012

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

Kildor (kildor.ya.ru) 2012

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

Михаил 2012

Круто же!

Сергей 2012

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

Сергей 2012

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

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

{padding-left:1px;}

}

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

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

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

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

Сергей 2012

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

Сергей 2012

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

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

{padding-right:1px;}

}

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

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

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

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

Сергей 2012

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

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

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

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

Сергей 2012

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

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

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

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

Сергей 2012

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

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

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

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

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

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

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

Сергей 2012

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

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

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

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

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

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

Сергей 2012

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

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

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

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

Света 2012

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

Red Vulps 2013

Grettings from Brazil. Thanks for the tip.

Edward-burya 2013

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

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

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

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

}

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

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

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

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

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

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

Grettings from Brazil. Thanks for the tip.

Welcome :)

Russell Crow 2017

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 2017

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) 2017

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

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