1

I have tried several stack overflow links where CSS hacks for opera were:-

@media not all and (-webkit-min-device-pixel-ratio:0) {  /*opera*/
    selector{

}
}

IN opera ver40.0 it doesn't work. I also tried answers on this post:- How to make CSS visible only for Opera

Then I wrote several media queries separately for chrome, firefox, ie and opera like this:-

 @media not all and (-webkit-min-device-pixel-ratio:0) {  /*opera*/
    #selector {  
       margin-top:-20px;
    }  
} 


@media screen and (-webkit-min-device-pixel-ratio:0) { /*chrome*/

  #selector{
    margin-top:-10px;
}
}

@media not all and (-moz-windows-compositor) { /*firefox*/
        #selector{
        margin-top:-10px;
    }
 }

@media screen and (min-width:0\0) { /* IE */

    #selector{
    margin-top:-10px;
    }

}

It works on chrome, firefox, ie but in opera it doesn't. When I check developer tools in Opera it's taking CSS of chrome instead. Now you might wonder why not then have it for chrome but I can't because margin-top is rendering way off with -10px in opera so I need -20px only in opera.

Community
  • 1
  • 1
Rajat Bansal
  • 183
  • 1
  • 14
  • The answers you're looking at are seven years old, Opera has since moved on to use the same core as Chrome (blink), and there probably aren't any hacks to target just Opera anymore, as it shouldn't be needed. – adeneo Sep 20 '16 at 20:17
  • @adeneo : But then why is it rendering differently for chrome and opera? I didnt even have media queries before but because of opera i seperated it into media queries. You are right because its using media query of chrome to render but then for margin result is different in both – Rajat Bansal Sep 20 '16 at 20:22
  • @TheOneandOnlyChemistryBlob : Some client uses opera what can I do. If stackoverflow community cant help then I will tell them we wont support opera. I actually downloaded it when he mentioned and checked . I had even forgotten about opera all this while – Rajat Bansal Sep 20 '16 at 20:22

1 Answers1

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');
}
Rajat Bansal
  • 183
  • 1
  • 14