Conditional In-Line CSS for IE and Others?

I was looking at the source code for this site. As you scroll down, the page changes based on your current scroll position - makes for a nice effect.

Looking at the source for the page in FireFox, I noticed they use -webkit-transform:matrix(a, b, c, d, 0, 0); to handle the movement of the divs. However, when viewing the same source in IE, it appears only as transform: matrix(a, b, c, d, 0, 0); These style attributes are in-line and appear as the following:

FireFox:

<div class="card gift" style="z-index: 0; -webkit-transform: matrix(a, b, c, d, 0, 0); right: 198px; top: 323px; opacity: 1;"></div>

IE:

<div class="card gift" style="z-index: 0; transform: matrix(a, b, c, d, 0, 0); right: 198px; top: 323px; opacity: 1;"></div>

In all the previous examples, a, b, c and d are all dynamic variables based on the current scroll position.

I looked at this post on SO regarding conditional CSS, but they do not mention in-line styles, as shown in the code above.

Is such a thing possible to do? I've tried the following, to no avail (fiddle here):

<div class="testing" style="<!--[if IE]>background-color: #321;<!--[if !IE]> -->background-color: #F00;<!-- <![endif]-->"></div>

If in-line conditional CSS is not possible, then how are they changing the in-line styles based on browser? My best guess is JavaScript to add the properties after the page loads, as a function of scroll position.

Thanks.

EDIT:

Looking at the link provided, they include

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-i10 ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

at the top of their page, which is almost identical to one of the answers in the SO link I provided. But I'm not really sure what those lines of code do. Is this part of the solution?

Thanks again.

回答1:

I think NO, You can't use Conditional-CSS as in-line.

But If you want to specify css-style according browser, here some css-hacks available:

Css Hacks

Browser specific CSS-Hacks

回答2:

Conditionals are HTML not CSS that said, I am pretty sure you cannot do inline conditionals as you have shown.

The HTML redirects users to specific style sheets to handle the IE side of the world, since IE is the only browser that supports these conditional statements.

Most likely there is a script that is detecting the browser, and updating the code on the fly as needed.

回答3:

there is nothing like inline conditional css, only ie has conditional statements upto IE9, onlycoin uses javascript to achieve the inline css.