31

一部のCSSルールをOpera（9.5 +）でのみ表示する方法はありますか？

4

13 に答える 13

60

Opera10.63に最適です

noindex:-o-prefocus, .class {
  color:#fff;
}
于 2010-10-26T07:43:28.393 に答える
15

このハックは最新のOperaで機能します。

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

私がテストした限り、他のブラウザには触れませんが、これはWebテクノロジーのブームなどにより、数か月間は実際に発生する可能性があります。

于 2009-08-14T22:11:13.287 に答える
8

純粋な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テストに合格しているため、何かが正しく表示されない場合は、他の理由（コードのどこかでエラーが発生している、信頼できない詳細やコーナーケースなど）が原因である可能性があります。 。）

于 2009-07-13T22:29:31.547 に答える
6

「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

于 2009-08-26T14:29:25.947 に答える
6

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
于 2012-07-24T13:59:05.977 に答える
3

Modernizr（http://www.modernizr.com/）を使用して、使用するCSS機能を検出できます。クラス名がbody要素に適用されるため、それに応じてCSSを構築できます。

于 2009-08-29T19:29:18.943 に答える
3

cssプロパティのサポートを検出するためのjQuery$.support拡張機能を作成しました。

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);
}
于 2010-08-29T19:25:13.057 に答える
1

私が考えることができる唯一の方法は、ユーザーエージェントをチェックし、それがOperaブラウザである場合にのみスタイルシートを参照することです。ユーザーエージェントが混乱する可能性があるため、これは100％信頼できるとは限りません。

于 2009-07-13T16:00:07.560 に答える
1

<link>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 */
}

ただし、ブラウザスニッフィングに基づいてスタイリングを行うことは一般的に悪い習慣です。

于 2009-07-13T16:02:26.900 に答える
1

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

こちらのサンプル

于 2009-11-25T10:26:40.343 に答える
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-include-style-for-opera-only

于 2009-12-18T17:59:37.990 に答える
0

決してお勧めしません。

GoogleでJavascriptまたはPHPブラウザスニファを確認してください。ただし、一部は古すぎてOpera9.5以降の検出を追加する必要がある場合があります。

ブラウザスニファ（スタイリング用）は一般的に悪い習慣です。

また、Opera 9.5以降では、ブラウザをIEとしてマスクして、あらゆる種類のスニッフィングを役に立たなくするオプションが提供されていることに注意してください。

編集：別の答えでわかるように、がありwindow.opera.version()ます。window.operaオブジェクトにこの情報が含まれていることを知りませんでした。ただし、誰かがOperaをIEまたは他のブラウザとして表示するように設定した場合でも、このオブジェクトがまだ使用可能かどうかを確認する必要があります。

于 2009-07-13T16:01:36.590 に答える
0

@certainlyakeyは私にとって素晴らしい働きをします：

@media all and（-webkit-min-device-pixel-ratio：10000）、not all and（-webkit-min-device-pixel-ratio：0）{#id {css rule}}

ボタンのあるページがあり、Operaでテキストが正しく表示されません。ボタンは何度も表示されます（カートに追加）。この修正を適用した後、それは完全に機能しました。

于 2011-04-21T13:23:22.943 に答える