How to Target CSS Only for Opera5th of Apr 2011 - Samuli Hakoniemi

Sometimes there is need to write browser-specific CSS declarations. Although every developer should put their best effort on creating structure and layout that doesn’t require any proprietary hacks, one may encounter situations where it’s impossible to proceed by the book.

My case was about font-size and letter-spacing on Opera (11.10). Opera was displaying selected font way too big to fit in allowed space and I needed a hack to fix this issue.

Opera 9 and below

This is pretty straight forward and well known hack:

html:first-child p
{
    font-size:12px;
}

The real issue, in my case, was how to target newer and modern Opera versions 10 and 11.

Opera 10 and above

The answer is in media queries. Earlier this was obvious hack while no other browsers supported media-queries properly. However, nowadays more and more browsers support it and therefore we need to tweak the conditions a little:

@media not all and (-webkit-min-device-pixel-ratio:0) {
    p {
        font-size:12px;
    }
}

I’ve validated this with Opera 10.5 and Opera 11. I also checked on Chrome 11, Chrome 12, Firefox 3.6, Firefox 4.0, Safari 5 and IE 8 that it doesn’t affect on them.

Edit: I haven’t tested this on Opera 9 or earlier, but according to other resources, this hack should work on those browsers too.

Conclusion

It’s still possible to write browser-specific hacks but it’s getting more and more complex all the time. In this case we’re using a hack that is actually targeted to WebKit browsers to get them excluded from the media query hack. However, there is no confidence that this hack would work on Opera 12 or next versions of Safari or Chrome would behave as expected.

And big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers? and Is There Any Dedicated CSS Hacks For Safari or Opera?.

13 thoughts on “How to Target CSS Only for Opera

  1. thomas on said:

    hi,
    the hack for Opera 10 & above is working for Opera on PC…..but not onto Mac (Opera 11.01)…sic!
    any solution ????
    cheers thomas

  2. Samuli Hakoniemi on said:

    I’ll check this. The links in article could provide a solution, since I created my alternate solution from the original one. Check those at first.

  3. thomas on said:

    hi, thanx ….but checked those sites before….and found no solution for the mac opera ambivalence…..sic!

    did you a try on mac opera, allready???
    with same result???

    cheers thomas

  4. Samuli Hakoniemi on said:

    Hi,

    I tested it with Opera 11.01. on Snow Leopard and it seemed to work as expected. So, if this is Opera 10 issue, I’m afraid I can’t help :(.

  5. miro on said:

    i try to change font-size for bulgarian address for opera, but it don’t work…

  6. Grim on said:

    @media not all and (-webkit-min-device-pixel-ratio:0) {
    p {
    font-size:12px;
    }
    }

    also affects Chrome now(version 17.0.963.56).

  7. noindex:-o-prefocus, #selector { }

    Seems to work fine for Opera 11, and the mini opera for ipad too.

  8. Carlito on said:

    The x:-o-prefocus Hack, also affects IE7. So you have to write another hack for IE7… :(

  9. Extreme on said:

    Does not affect Opera 12

  10. ajay on said:

    not working

  11. happypixel on said:

    this doesn’t work for Opera 12