Question

I’m using such code which works great on IE and Firefox:

 .tytulmalykom {
    color:#666666;
    font-size:11px;
    font-variant:small-caps;
}

I would like to use this code for Opera, Safari and Chrome only:

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

All my stylesheets are inside stylesheet.css file.

So far I’m using so many link rel’s:

<link rel="stylesheet" href="files/stylesheet.css" type="text/css" />
<![if !IE]><link rel="stylesheet" type="text/css" href="files/firefox.css" media="screen" /><![endif]>
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="files/ie7.css" /><![endif]-->

Answer 1

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