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

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

Вы можете использовать javascript для записи для включения определенного файла 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 */
}

Однако, вообще плохая практика делать стили на основе анализа браузера.

Not in any way I would recommend.

Check for Javascript or PHP browser sniffers on Google. Some may be so outdated that you need to add detection for Opera 9.5+, however.

Browser sniffers (for styling) are generally bad practice.

Also, note that Opera 9.5+ gives users the option of masking their browser as IE, rendering any kind of sniffing useless.

Edit: As you can see in another answer, there is window.opera.version(). I didn't know the window.opera object contained this information. HOWEVER, you should probably look to see if this object is still available when someone has set Opera to be seen as IE or some other browser.

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

Не думайте "обнаруживать 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 */
}

Предупреждение: непроверено :-p

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

<ссылка href = "opera.css" rel = "таблица стилей" тип = "текст / опера" media = "all" />

пример здесь

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

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

.element {/ * стиль только для оперы * /}

}

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

Я написал jQuery $.расширение поддержки для обнаружения поддержки свойства 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);
}