How to Do a Chrome/Opera Specific Stylesheet

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

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.

How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

You can use IE conditional comments such as this:

<!--[if IE]>
    According to the conditional comment this is IE<br />
<![endif]-->

So you could use something like this:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 10]>
        <link href="iestyles.css" rel="stylesheet" type="text/css" />
    <![endif]-->
</head>

You can learn more about them here

CSS stylesheet for Opera, Safari and Chrome only

Here what I did to solve this problem:

I've added on each page:

<style type="text/css">

@-moz-document url-prefix() { 
    .tytulmalykom { font-variant:small-caps; text-transform:none }
}
</style>

then

in stylesheet.css:

.tytulmalykom {
    color:#666666;
    font-size:11px;
    text-transform:uppercase;
}

and ie7.css:

.tytulmalykom {
    font-variant:small-caps;
}

nothing else needed in firefox.css

Make CSS apply only for Opera 11?

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.

Safari/Opera/Chrome/FF pull different Stylesheets from the exact same file location

Maybe it's a weird server side caching problem, to test it try changing the numbers at the end of the html code from 'http://www.kurt4apa.org/campaign/wp-content/themes/geisinger/style.css?ver=3.5.1' to 'http://www.kurt4apa.org/campaign/wp-content/themes/geisinger/style.css?ver=3.5.2'

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

Loading Browser Specific Style Sheets in Modern Browsers

Some suggestions:

Server-side detection

Depending on the server serving the CSS files, you may configure/customize it to serve the file you want depending on the User-Agent header.

Link to CSS depending on the browser

See answer from scunliffe

Single CSS with class on body and overridden rules

Detect the browser, and add a class on the body according to the browser, for example document.body.className += " msie"

Then override the rules you want in your css

body.msie someTag { /*msie specific rules*/ }

I recommend to use a library for browser detection, they are usually more tested. I just found WhichBrowser which seems to do that very well.

How to Do a Chrome/Opera Specific Stylesheet