How to make CSS visible only for Opera

2020-01-23 17:09发布

站内问答 / HTML/CSS
1154 13 5

Is there a way to make some CSS rules visible only for Opera (9.5 +)?

13条回答
萌系小妹纸
2楼-- · 2020-01-23 17:20

I wrote a jQuery $.support extension for detecting css property support.

http://gist.github.com/556448

Additionally i wrote a little snippet to make really little vendor hacks:

// 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);

This results for example in:

<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">

In your Stylesheets use it this way:

html.opera #content_lock {
  background:rgba(0,0,0,0.33);
}
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2020-01-23 17:22

With pure CSS hack you might be unable to safely limit upper version you're hacking (e.g. -o-prefocus may be supported long after your hack stops fixing things and starts breaking them).

// 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';
}

and in CSS:

.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }

But please double-check CSS spec first to ensure that what you're hacking is actually a bug. Opera 10 has full CSS2.1 support and passes all Acid tests, so if something doesn't appear right, it might be because of other reasons (error somewhere else in the code, detail or corner case you shouldn't rely on, etc.)

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
4楼-- · 2020-01-23 17:26

The only way I can think of is to check the user agent and only reference the style sheet when it's an opera browser. Since the user agent can be messed with this might not be 100% reliable.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
5楼-- · 2020-01-23 17:27

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
6楼-- · 2020-01-23 17:28

Not in any way I would recommend.

Check for Javascript or PHP browser sniffers on Google. Some may be so outdated that you need to add detection for Opera 9.5+, however.

Browser sniffers (for styling) are generally bad practice.

Also, note that Opera 9.5+ gives users the option of masking their browser as IE, rendering any kind of sniffing useless.

Edit: As you can see in another answer, there is window.opera.version(). I didn't know the window.opera object contained this information. HOWEVER, you should probably look to see if this object is still available when someone has set Opera to be seen as IE or some other browser.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
7楼-- · 2020-01-23 17:29

This hack works for the latest Opera:

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

It doesn't touch any other browser as far as i tested, but this may be actual for several months, with web technologies boom etc.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)