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

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

Ответ 1

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

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

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

Ответ 2

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

noindex:-o-prefocus, .class {
  color:#fff;
}

Ответ 3

С чистым взломом 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, поэтому, если что-то не отображается правильно, возможно, это связано с другими причинами (ошибка где-то еще в коде, детали или в углу, на который вы не должны положиться, и т.д..)

Ответ 4

Opera12

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

Ответ 5

Не думайте "обнаружить Opera".

Подумайте, что "обнаруживают браузеры, которые не поддерживают функцию 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 */
}

Предостережение: untested: -p

Ответ 6

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

Ответ 7

Я написал расширение 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);
}

Ответ 8

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

Ответ 9

Вы можете использовать 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 */
}

Однако, как правило, это плохая практика для стилизации, основанной на обнюхивании браузером.

Ответ 10

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

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

Ответ 11

<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

Ответ 12

Я никак не рекомендую.

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

Браузерные снифферы (для стилизации) - это, как правило, плохая практика.

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

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

Ответ 13

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

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

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