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

Question

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

Answer 1

Этот хак работает на последнюю оперу:

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

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

Answer 2

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

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

Не думайте, что «обнаружите Opera».

Подумайте, «обнаружите браузеры, которые не поддерживают функцию x».Например, этот оператор JavaScript позволяет обнаружить браузеры, которые поддерживают Мос-граница радиуса:

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

Answer 7

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

Answer 8

< ссылка HREF = "opera.css" отн = тип "таблица стилей" = "текст/опера" СМИ = "все"/>

sample here

Answer 9

<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

Answer 10

Я написал расширение .поддержки 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"> 

В ваших Stylesheets использовать его таким образом:

html.opera #content_lock { 
    background:rgba(0,0,0,0.33); 
} 

Answer 11

отлично подходит для Opera 10.63

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

Answer 12

@certainlyakey работает удивительным для меня:

@media все и (-webkit-мин-устройства пиксел соотношение: 10000), а не все, и (-webkit-мин-устройства-пиксельного -ratio: 0) { #id {css rule} }

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

Answer 13

Opera12

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