Question

Is there any way that I can override something in css and use different size if user/visitor uses opera?

Example, in chrome, ff and safari this works great:

.section#search h3 a {
    background: url("../img/search.png") no-repeat 0 50%;
    padding: 0 0 0 25px;
    position: relative;
}

But in Opera padding is not really good… I need to add top: 16px; into it or to change padding to padding: 0 0 36px 25px;

Is there any “hack” like for IE or maybe javascript usage? No ideas…

All I need is to add that top or new padding just for opera. Thanks 😉

Answer 1

With the conditional-css tool, you can target opera, but engine is important. conditional-css.com explains:

Conditional-CSS isn’t really all that interested in which browser the
user is using, but rather what rendering engine the user’s browser
utilises. This is why Conditional-CSS uses ‘Gecko’ rather than the
well known Firefox as one of it’s browser conditions. Likewise for
Safari ‘Webkit’ is used. This allows other browsers using the same
rendering engines to receive the same targeted CSS. An exception to
this rule is made for IE (rather than using ‘Trident’) since this is
what the IE conditional comments use and Trident isn’t particuarly
well known. Similarly for Opera, since only the Opera browser uses
it’s Presto rendering engine, ‘Opera’ is used.

http://www.conditional-css.com/advanced

they write that a conditional tag is formed like:

[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

and that browser names are as follows:

IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front

So it should logically follow, according to them, that you can target via:
[if Opera]

like this in a CSS block:

[if Opera] .box {  
    width: 500px;  
    padding: 100px 0;  
} 

or like this for a CSS include:

<!--[if Opera]>

<![endif]-->