Как сделать CSS видимым только для Opera

Есть ли способ сделать некоторые правила CSS видимыми только для Opera (9.5 +)?

Источник

13 ответов

Решение

Этот хак работает для последней Opera:

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       #id {css rule}
 }

Насколько я тестировал, он не касается любого другого браузера, но это может быть актуально в течение нескольких месяцев, с бумом веб-технологий и т. Д.

Источник

Отлично работает для Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}
Источник

С помощью чистого хака CSS вы не сможете безопасно ограничить взломанную верхнюю версию (например, -o-prefocus может поддерживаться еще долго после того, как ваш хак перестанет чинить вещи и начнет их ломать).

// remember to limit maximum version, because hacking all future versions
// will eventually break the page 
if (window.opera && window.opera.version() < 10)     
{
   document.documentElement.className += ' opera9';
}

и в CSS:

.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }

Но, пожалуйста, сначала проверьте CSS-спецификацию, чтобы убедиться, что то, что вы взламываете, действительно является ошибкой. Opera 10 имеет полную поддержку CSS2.1 и проходит все тесты Acid, поэтому, если что-то не так, это может быть вызвано другими причинами (ошибка в другом месте кода, подробности или случай, на который вы не должны полагаться, и т. Д..)

Источник

Не думай "обнаружи оперу".

Подумайте, "найдите браузеры, которые не поддерживают функцию x". Например, этот оператор JavaScript позволяет обнаруживать браузеры, которые поддерживают moz-border-radius:

typeof (getComputedStyle(document.body, '').MozBorderRadius)=='string'

и это эквивалентно для браузеров на базе WebKit (Safari, Chrome):

typeof (getComputedStyle(document.body, '').WebKitBorderRadius)=='string'

Собрав это вместе, мы можем придумать что-то вроде

function detectBorderRadiusSupport(){
    var styleObj;
    if( window.getComputedStyle ){
        styleObj=window.getComputedStyle(document.body, '');
    }else{
        styleObj=document.body.currentStyle;
    }
    return typeof styleObj.BorderRadius != 'undefined' || typeof styleObj.MozBorderRadius != 'undefined' || typeof styleObj.WebKitBorderRadius != 'undefined';
}

// the below must be inside code that runs when document.body exists, for example from onload/document.ready/DOMContentLoaded event or inline in body

if(!detectBorderRadiusSupport())document.body.className+=' fakeBorderRadius';

CSS:

body.fakeBorderRadius .roundMyCorners{
    /* CSS for Opera and others to emulate rounded corners goes here, 
    typically various background-image and background-position properties */
}

Будьте осторожны:-p

Источник

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
Источник

Вы можете использовать Modernizr ( http://www.modernizr.com/) для определения функций CSS, которые вы хотите использовать - он применяет имена классов к элементу body, чтобы вы могли соответствующим образом сконструировать свой CSS.

Источник

Я написал расширение jQuery $.support для определения поддержки свойств css.

http://gist.github.com/556448

Кроме того, я написал небольшой отрывок, чтобы сделать действительно маленькие взломы вендоров:

// Sets browser infos as html.className
var params = [];
$.each($.browser, function(k, v) {
  var pat = /^[a-z].*/i;
  if(pat.test(k)) { params.push(k); }
});
params = params.join(' ');
$('html').addClass(params);

Это приводит, например, к:

<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">

В ваших таблицах стилей используйте это следующим образом:

html.opera #content_lock {
  background:rgba(0,0,0,0.33);
}
Источник

<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />

Хотя это решение скорее взломано CSS, и нет никаких гарантий, что оно будет поддерживаться в будущих версиях Opera. Вы также можете использовать следующее решение:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {

.element{/*style for opera only*/}

}

http://bookmarks-online.net/link/1308/css-including-style-for-opera-only

Источник

Единственный способ, о котором я могу подумать, - это проверить пользовательский агент и ссылаться на таблицу стилей только тогда, когда это браузер оперы. Поскольку пользовательский агент может быть испорчен, это не может быть на 100% надежным.

Источник

образец здесь

Источник

Вы можете использовать JavaScript, чтобы написать <link> включить определенный файл CSS.

if (navigator.userAgent.indexOf(’Opera’) != -1) {
    document.write(””);
}
else {
    document.write(””);
}

Для Opera 7 вы можете использовать это:

/*Visible to only Opera*/
@media all and (min-width: 0) {
    /* css rules here */
}

Тем не менее, как правило, плохая практика - делать стили на основе сниффинга в браузере.

Источник

Ни в коем случае я бы не рекомендовал.

Проверьте, нет ли в браузере снифферов Javascript или PHP. Однако некоторые из них могут быть настолько устаревшими, что вам нужно добавить обнаружение для Opera 9.5+.

Анализаторы браузера (для стайлинга), как правило, плохая практика.

Также обратите внимание, что Opera 9.5+ дает пользователям возможность маскировать свой браузер под IE, что делает бесполезным любое прослушивание.

Редактировать: Как вы можете видеть в другом ответе, есть window.opera.version(), Я не знал window.opera объект содержал эту информацию. ОДНАКО, вам, вероятно, стоит посмотреть, доступен ли этот объект, когда кто-то установил Opera для просмотра в качестве IE или другого браузера.

Источник

@ surelyakey работает потрясающе для меня:

@media all и (-webkit-min-device-pixel-ratio:10000), не все и (-webkit-min-device-pixel-ratio:0) { #id {css rule} }

У меня есть страница с кнопкой, и текст не будет правильно отображаться в Opera. Кнопка появляется много раз (добавить в корзину). После применения этого исправления все заработало отлично.

Источник
Другие вопросы по тегам