Opera 12 CSS hack

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

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

Хак получился вот такой:
@media (min-resolution: .001dpcm) {
    _:-o-prefocus, body { /* стиль только для Opera 12.00+ */
        background: red;
    };
}
Соответственно, на место «body» надо поставить требуемый тег или селектор.
29 июня 2012 10:15

rmcreative.ru (rmcreative.ru)
29 июня 2012, 11:35

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

Михаил Калашник (splurov.livejournal.com)
29 июня 2012, 12:01

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

bolk (bolknote.ru)
29 июня 2012, 12:25, ответ предназначен Михаил Калашник (splurov.livejournal.com):

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

bolk (bolknote.ru)
29 июня 2012, 12:26, ответ предназначен Михаил Калашник (splurov.livejournal.com):

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

bolk (bolknote.ru)
29 июня 2012, 12:27, ответ предназначен rmcreative.ru:

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

Михаил Калашник (splurov.livejournal.com)
29 июня 2012, 12:42

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

bolk (bolknote.ru)
29 июня 2012, 12:45, ответ предназначен Михаил Калашник (splurov.livejournal.com):

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

SelenIT (инкогнито)
29 июня 2012, 13:11

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

bolk (bolknote.ru)
29 июня 2012, 13:21, ответ предназначен SelenIT

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

fatal.myopenid.com (fatal.myopenid.com)
29 июня 2012, 20:31

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

Kildor (kildor.ya.ru)
2 июля 2012, 06:02

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

Михаил (инкогнито)
21 августа 2012, 21:00

Круто же!

Сергей (инкогнито)
5 сентября 2012, 19:27

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

Сергей (инкогнито)
5 сентября 2012, 19:34

Подскажите, сейчас посмотрел, теперь у меня лишний отступ в 1 пиксель появляется в гугл хром, может я что-то не так сделал? В общем смысл такой что мне в опере надо слева сделать отступ в 1 пиксель, вот что я написал:
@media (min-resolution: .001dpcm) {
.pad {padding-left:1px;}
}

bolk (bolknote.ru)
5 сентября 2012, 19:37, ответ предназначен Сергею

Используйте стиль полностью:
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .pad {padding-left:1px;}
}

Сергей (инкогнито)
5 сентября 2012, 19:41

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

Сергей (инкогнито)
5 сентября 2012, 19:56

Решение придумал, пришлось добавить ещё и хак для хрома
@media screen and (-webkit-min-device-pixel-ratio:0) {
.pad {padding-right:1px;}
}

bolk (bolknote.ru)
5 сентября 2012, 20:50

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

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

Сергей (инкогнито)
5 сентября 2012, 21:29

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

bolk (bolknote.ru)
6 сентября 2012, 07:39, ответ предназначен Сергею

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

Сергей (инкогнито)
6 сентября 2012, 09:20

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

bolk (bolknote.ru)
6 сентября 2012, 15:22, ответ предназначен Сергею

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

Сергей (инкогнито)
6 сентября 2012, 17:16

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

bolk (bolknote.ru)
6 сентября 2012, 18:02, ответ предназначен Сергею

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

Сергей (инкогнито)
7 сентября 2012, 00:50

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

bolk (bolknote.ru)
7 сентября 2012, 06:10, ответ предназначен Сергею

У меня тоже 21.0.1180.89. Вот этот стиль:
@media (min-resolution: .001dpcm) {
_:-o-prefocus, body {background: red;}
}
Не даёт нигде, кроме «Оперы» красного фона.

Сергей (инкогнито)
7 сентября 2012, 16:12

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

bolk (bolknote.ru)
8 сентября 2012, 10:28, ответ предназначен Сергею

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

Света (инкогнито)
14 октября 2012, 11:32

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

Red Vulps (инкогнито)
21 марта 2013, 17:27

Grettings from Brazil. Thanks for the tip.

Edward-burya (инкогнито)
21 марта 2013, 18:22

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

надо прописать под оперу для меню хак не большой.
@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .sub-menu .menu-item a:hover { /* стиль только для Opera 12.00+ */
        margin-left:1px;;
    };
}
стиль с ховером не работает, без ховера все гуд. В чем может быть трабла?

Евгений Степанищев (bolknote.ru)
21 марта 2013, 18:41, ответ предназначен Edward-burya

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

Евгений Степанищев (bolknote.ru)
21 марта 2013, 18:42, ответ предназначен Red Vulps

Grettings from Brazil. Thanks for the tip.
Welcome :)

Russell Crow (инкогнито)
6 февраля 2017, 20:00

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 (инкогнито)
6 февраля 2017, 22:07

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 (bolknote.ru)
7 февраля 2017, 06:33, ответ предназначен Russell Crow

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

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)