How to make CSS visible only for Opera
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.
Unable to apply specific CSS only for opera 40.0
Since no hack is available based solely on CSS, the javascript browser detection worked for me and then I used jquery to override the css like this:-
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
if(isOpera){
$(selector).css('margin-top','-30px');
}
How to Set an if in css for opera browser?
You may use the -o-prefocus
hack test this in a opera browser to see the difference
<p>HELLO WORLD</p>
p { font-size: 20px; }
-o-prefocus, p{
font-size: 90px;
}
Make CSS apply only for Opera 11?
I love challenges!
It took me some time but I finally found it:
body {background:0} /* default */
@media not screen and (1) {
body {background:red} /* OP 11 */
}
@media not screen and (orientation) {
body {background:green} /* for the earlier versions of Opera that pick the first media query's rule + chrome/safari */
}
browsers tested:
- red: Opera 11
- green: Opera 10 and 10.5 + WebKit browsers
- none: Opera 9.26 + Firefox 3.6 + IE9
It's related to the error-handling and also the fact that NOT negates the global result (WebKit browsers don't evaluate orientation correctly without a valid value). Since orientation
is supported in presto 2.7 the second media query is FALSE.
The false orientation hack sounds like a good name to me.
how to make a css if opera,not...
you can use the property you want for a selector like #content{left:1px;}
then add a css hack for opera providing the default value (or the value you want). The css hack has the following syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}
an example of the previous syntax and your example could be: @media all and (min-width:0px) {head~body #content {left:0px;}}
How to do a Chrome/Opera specific stylesheet?
A clean javascript way to do this: http://rafael.adm.br/css_browser_selector/
It ads browser specific classes to the body tag of your html which you can use in your css like:
.opera #thingie, .chrome #thingie {
do: this;
}
Hope this helps.
CSS specific rule for Opera 12?
Here is an officially recommended hack for Opera (in case everything else fails):
doesnotexist:-o-prefocus, .example {
color: red;
}
http://www.opera.com/docs/specs/presto2.12/css/o-vendor/
via: https://stackoverflow.com/a/4021618
p.s.: notice comment by davehale32, that this hack does not work for IE6. I have no IE6 at my disposal now, so i can't confirm or deny that.
If opera - something different in css?
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]-->
Related Topics
Why Doesn't This A:Visited CSS Style Work
Css3 Animation Not Working in Safari
Css Properties: Display Vs. Visibility
Applying CSS Styles Only to Certain Elements
Css Selector For Attribute Names Based on a Wildcard
Do I Need to Wrap Quotes Around Font Family Names in Css
Style Child Element When Hover on Parent
Outlining and Partially Filling an Svg Shape
How to Only Show Certain Parts with CSS for Print
What Is the Meaning of 'Auto' Value in a CSS Property
Css Text-Decoration Property Cannot Be Overridden by Child Element
Css Transparent Curved Shape With Two Rounded Sides
Centering Brand Logo in Bootstrap Navbar
Responsive CSS Triangle With Percents Width
Combining :Last-Child With :Not(.Class) Selector in Css
How to Determine What Font a Browser Is Actually Using to Render Some Text