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:
<div class="card gift" style="z-index: 0; -webkit-transform: matrix(a, b, c, d, 0, 0); right: 198px; top: 323px; opacity: 1;"></div>
<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,
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>
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?
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 that said, I am pretty sure you cannot do inline conditionals as you have shown.
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.