Opera 12 CSS hack
Вышла «Опера» 12, многое поменялось, на некоторых моих сайтах едут стили. В частности, на «Маке» «Опера» поменяла поведение стиля «font-size: 0» — теперь он отображается шрифтом какого-то минимального размера.
Пришлось придумывать ЦСС-хак для этой версии. Я не могу себе позволить искать новое решение и заново тестировать его во всех браузерах, мне проще оставить всё как есть, сделав исключение.
Хак получился вот такой:
@media (min-resolution: .001dpcm) {
_:-o-prefocus, body { /* стиль только для Opera 12.00+ */
background: red;
};
}Соответственно, на место «body» надо поставить требуемый тег или селектор.
Красивый префикс вышел _:-o
А как воспроизвести проблему с font-size: 0?
http://jsfiddle.net/S829u/ — не воспроизводится, выглядит одинаково в FF и Opera.
Комментарий для splurov.livejournal.com:
У меня по-разному выглядит. В FF 11 и 12 одна надпись, в «Опере» 12 — две.
Комментарий для splurov.livejournal.com:
В FF 13.0.1 тоже одна надпись.
Комментарий для rmcreative.ru:
:-D
На винде в 12 опере так же как в ФФ, на маке в 11.64 пустая строка.
Комментарий для splurov.livejournal.com:
Вот же блин. Значит придётся искать более универсальное решение.
Разве это что-то новое? Если ничего не путаю, еще «Opera 9» (или какая-то подобная) не давала скукожить текст меньше, чем до 6 пкс (это где-то настраивалось, но по умолчанию было так). А вебкитные пару лет назад при font-size: 0 оставляли по пикселю на месте пробела и пустой строки. Мне кажется, полагаться на font-size:0 вообще особо не стоит, тем более даже в спецификации на эту тему ( http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size ) стоит отдельный «Note 1».
Комментарий для SelenIT:
Предыдущая «Опера» на «Маке» у меня вполне давала кукожить.
Надо было производителям браузеров договориться до какого-то разумного общего решения. Например, при нулевом размере -- «кукожить», при любом выше нуля по усмотрению браузера и настроек пользователя.
Preferences » Advanced » Fonts » Minimum font size (pixels) — если выставить 0, то всё скукоживается. Если выставить число — то кукожит до этого числа, и не меньше. По мне так это логично.
Круто же!
Большое спасибо! Порылся в интернете, до сих пор решений никто не написал. Нашёл только на вашем сайта действительно работающее решение!
Подскажите, сейчас посмотрел, теперь у меня лишний отступ в 1 пиксель появляется в гугл хром, может я что-то не так сделал? В общем смысл такой что мне в опере надо слева сделать отступ в 1 пиксель, вот что я написал:
Комментарий для Сергей:
Используйте стиль полностью:
Исправил, в опере так же как и в предыдущем варианте, что я написал выше работает хорошо, а в гугл хром теперь лишний отступ в 1 пиксель появляется.
Решение придумал, пришлось добавить ещё и хак для хрома
Комментарий для Евгения Степанищева:
У вас появился отступ вот с этим хаком? http://bolknote.ru/all/3675/#n36088
Испытал только на «Хроме», всё ок, не срабатывает, работает только на «Опере».
Да, с этим хаком на хроме отступ появился справа.
Комментарий для Сергей:
Ну, вы вроде именно это и хотели?
Не совсем...у меня появлялся почему-то лишний отступ слева в опере. Вчера обнаружил, что старый хак для оперы перестал работать. Нашёл ваш хак, поставил, в опере он заработал, НО при этом он оказывается влияет и на хром ещё, так как у него этот оступ стал уже лишним, поэтому пришлось отдельно ещё хак для хрома ставить.
Комментарий для Сергей:
Вы просто мой хак не до конца написали, я же написал что у вас неправильно.
Я потом исправил хак так как вы написали и всё равно в хроме этот отступ появляется. Кстати, хак даже работал без той части кода, который вы дописали.
Комментарий для Сергей:
Какая версия «Хрома»?
Конечно, только он сразу перестаёт быть хаком для «Оперы» и начинает работать под ещё кучей браузеров.
В справке написано, что стоит последняя версия 21.0.1180.89. Ну с правильным хаком, что вы исправили всё равно в хроме отступ появляется.
Комментарий для Сергей:
У меня тоже 21.0.1180.89. Вот этот стиль:
Не даёт нигде, кроме «Оперы» красного фона.
Странно, у меня вот почему то реагирует на хром.
Комментарий для Сергей:
Ничего не могу сказать. Все три хрома, которые я посмотрел, работают одинаково, а версия совпадает с вашей.
Спасибо, очень помогло!
Grettings from Brazil. Thanks for the tip.
Не работает с ховером..
надо прописать под оперу для меню хак не большой.
_:-o-prefocus, .sub-menu .menu-item a:hover { /* стиль только для Opera 12.00+ */
margin-left:1px;;
};
стиль с ховером не работает, без ховера все гуд. В чем может быть трабла?
Комментарий для Edward-burya:
Вот уж не знаю, я попробовал, работает.
Комментарий для Red Vulps:
Welcome :)
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?
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
Комментарий для Russell Crow:
It should be some Opera bug. Why do you still use this ancient browser? Give it up :)