web-dev-qa-db-ja.com

Operaの場合にのみCSSを表示する方法

Opera（9.5 +）に対してのみ表示されるCSSルールを作成する方法はありますか？

cssoperacss-hack
31
Calin Don

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

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

私がテストした限り、他のブラウザには触れませんが、これは数か月間、Webテクノロジーのブームなどで実際に起こるかもしれません。

15
certainlyakey

Opera 10.63

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

純粋な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*/ }

しかしplease最初にCSS仕様を再確認して、ハッキングしているものが実際にバグであることを確認してください。 Opera 10はCSS2.1を完全にサポートしており、すべてのAcidテストに合格しています。そのため、何かが正しく表示されない場合は、他の理由（コード、エラー、またはに依存するなど）

8
Kornel

「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
hallvors

Opera12

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

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

3
riddle

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);
}
3
JackFuchs

_<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

1
user234726

私が考えることができる唯一の方法は、ユーザーエージェントをチェックし、それがoperaブラウザーであるときのみスタイルシートを参照することです。

1
JoshBerke

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
amr

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

サンプルはこちら

1
valentin

@certainlyakeyは私にとって素晴らしい仕事です：

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

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

0
Kaos

決して推奨しません。

GoogleでJavascriptまたはPHPブラウザースニファーを確認します。ただし、一部が非常に古いため、Opera 9.5+の検出を追加する必要があります。

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

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

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

0
user136565