3155 читателей, 146 постов
Администрация
Модераторы
Блог о CSS, его применении, новости по теме.
Каскадные Таблицы Стилей whois
- индекс
- 230,41
Opera 10.50 и CSS-хаки
Opera 10.50 стала поддерживать border-radius и много других интересных вещей, в этой связи встал вопрос — как отличить Opera 10.50 от более ранних версий в CSS?
Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.
Я не знаю минимальной версии при которой срабатывает хак №2, но подозреваю, что будет работать где-то начиная с 7-й версии.
Все хаки я испытывал на «Операх» 10.50 prealpha, 10.10, 10.01, 9.50 и 9.27. Надеюсь, баг 10.50 не исправят и хак будет работать и дальше (pepelsbey, пожалуйста, молчи!:).
Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.
Нужно понимать, что хаки сделаны исключительно для того, чтобы отличить одну версию «Оперы» от другой и могут сработать в других браузерах, так что лучше подстраховаться и добавить в стили какой-нибудь хак, чтобы отличать «Оперу» от всего остального.
- @media (0) {
- body { background: red; } /* Opera 10.xx, но < 10.50 */
- }
- @media all and (resolution = 0dpi) {
- body { background: red; } /* Opera < 10.50, минимальной версии не знаю, 9.27 работает */
- }
- @media all, () {
- body { background: red; } /* Opera 10.xx (включая 10.50) */
- }
- @media all, {
- body { background: red; } /* Opera 10.50 prealpha */
- }
Я не знаю минимальной версии при которой срабатывает хак №2, но подозреваю, что будет работать где-то начиная с 7-й версии.
Все хаки я испытывал на «Операх» 10.50 prealpha, 10.10, 10.01, 9.50 и 9.27. Надеюсь, баг 10.50 не исправят и хак будет работать и дальше (pepelsbey, пожалуйста, молчи!:).
комментарии (80)
@browser opera and (min-version:9.50) and (max-version: 9.57) {
}
$(function(){
if ($.browser.opera) $('body').addClass('opera');
})
CSS:
.opera h1 { border: 1px solid #F00 }
Быстро-дешево-сердито :)
.m-no-border-radius. Тогда при появлении нового браузера будет достаточно поменять код в одном месте.Давайте посмотрим статистику сайта Экслера:
Opera 9 — 7,6%
Firefox 2 — 1,2%
Mozilla 1 — 0,5%
Safari 2 — 0,3%
Safari 3 — 0,2%
Opera 8 — 0,1%
берём калькулятор и получаем почти 10% посетителей.
Что касается разработки больших порталов, то тут я с вами соглашусь, там имеет смысл, да и бюджет позволяет обычно заморочиться за расширенную поддержку браузеров.
округляя:
Chrome 3 — 6,6%
Firefox < 3.5 — 9,5%
Opera Mini 1.2 — 0,002%
Opera < 10 — 4,7%
Это только усугубляет ситуацию с хаками. Которых, вообще говоря быть не должно.
(Да я знаю сто не у всех включен js, для таких нужна специальная версия css, сгенерированные на сервере body -классы и т.п)
Зато вариант с js прост в исполнении и поддержке, и редко ломаеться при выходе новых браузеров
Спецификация — это то, как должны работать все браузеры. Если они не работают так, то это исключительно проблемы браузеров, есть куда стремиться. Если для каждого браузера будет своя ветка кода, то пышным цветом расцветут вендорные расширения и никогда уже не будет шансов вернуться к единой поддержке спецификации W3C.
А это значит, что по версии браузера придётся подключать разные куски CSS в будущем.
Я чуть ниже дал две хорошие ссылки.
п.с. Чикуенок конечно крутой чувак, но почему-то со стороны студии Артема (и тех кто с ней пересекался) постоянно веет недопониманием сути стандартов.
п.с.с. Чувствую сейчас хлебну минусятинки )
Суть не в том, чтобы сделать по стандартам, а в том, чтобы это еще и хорошо работало.
Париться с поддержкой разных версий браузеров — та еще работенка, а backпround img поддерживают все…
Я сейчас практикую следующие подходы, которые максимально удобны, предсказуемы и понятны мне.
1.
<!--[if IE]><link rel="styleshee" type="text/cs" href="/ie.cs" /><![endif]-->
<!--[if IE 6]><link rel="styleshee" type="text/cs" href="/ie6.cs" /><![endif]-->
2.
<script src="/compatibility.js"></script>
$(function() {
if ($.browser.opera) {
// fix wrong right margin of buttons in opera
$('button.btn').css('margin-right', '3px');
};
if ($.browser.mozilla) {
// fix wrong top margin of buttons in FF
$('button.btn').css('margin-top', '-1px');
};
if ($.browser.safari) {
// fix wrong top margin of buttons in Chrome/Safari
$('button.btn').css('margin-top', '-1px');
};
});
На реальных проектах нужно порой отличать очень многих от многих. Эти объемы зависят на 99% только от качества верстки и стилей. К сожалению, самой непредсказуемой и максимально требующей CSS-хакрства задачей является расположение и стилизация input'ов, которые отличаются во всех браузерах.
А как называется — просто border-radius или что-нибудь свое собственное?
А уж преальфы, да еще оперы — легко можно пропустить
trends.spylog.ru/global-statistic-browsers/#level=1&attr=1%252C2%252C3%252C5%252C6
Багов быть не должно :)
Но вам отвечу вот так:
— Do websites need to look exactly the same in every browser?
— и вот так: Ignorance Is Bliss
Может в Opera 10.50 какие-то селекторы появились новые, а? Или из media queries что-то новое реализовали?
А она раньше бета-версий вряд ли появится.