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

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

31 голосов
/ 13 июля 2009

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

Ответы [ 13 ]

60 голосов
/ 26 октября 2010

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

noindex:-o-prefocus, .class {
  color:#fff;
}
15 голосов
/ 15 августа 2009

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

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

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

8 голосов
/ 14 июля 2009

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

6 голосов
/ 24 июля 2012

Opera12 

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
6 голосов
/ 26 августа 2009

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

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

3 голосов
/ 29 августа 2010

Я написал расширение 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);
}
3 голосов
/ 29 августа 2009

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

1 голос
/ 18 декабря 2009

<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 / ссылка / 1308 / KSS, в том числе в стиле-для-оперы только

1 голос
/ 25 ноября 2009
1 голос
/ 13 июля 2009

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

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

Страница:
...