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

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

31
css css-hack opera

13 ответов

этот хак работает на последней версии Opera:

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

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

15

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

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

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

8

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

6

Opera12

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

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

3

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

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

1

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

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

1
1

<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

1

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

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

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

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

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

0

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

@media all and (- webkit-min-device-pixel-ratio: 10000), не все и (- webkit-min-device-pixel-ratio:0) { #id {правило css} }

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

0