javascript - Conditional In-Line CSS for IE and Others? - Stack Overflow-软件玩家

admin管理员组
文章数量:1410689

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.

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.

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>

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.

Share edited May 23, 2017 at 12:11 CommunityBot 11 silver badge asked Jan 30, 2014 at 19:43 Birrel 4,8647 gold badges41 silver badges79 bronze badges

[if gt IE 9] .. does IE10 support conditional ments? – Rasmus Søborg Commented Jan 30, 2014 at 19:48
No. IE9 was the last IE to support Conditionals, AND the IE Hacks too many people became accustomed to using... they too are no longer valid. – Phlume Commented Jan 30, 2014 at 19:50
1 The site isn't using any sort of in-line conditional. They're using some server side or client side processing to detect the browser and change what inline styles get applied to the card gift class elements that get those styles you see. Still, interesting find. +1 – Patrick M Commented Jan 30, 2014 at 20:12
It's more likely that the inline styles were being applied by javascript. – Kevin B Commented Jan 30, 2014 at 20:14
1 no no no, hear me out: the javascript which applies those inline styles to the page knows what browser your're in, and it applies only the correct settings. This is a JS question right? (the rules are not in the html source, so i assumed so) typically, only scripts set inline style attribs these days: most humans avoid such nonsense. – dandavis Commented Jan 30, 2014 at 20:18

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

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

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.

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

本文标签： javascriptConditional InLine CSS for IE and OthersStack Overflow

版权声明：本文标题：javascript - Conditional In-Line CSS for IE and Others? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745019589a2638049.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Conditional In-Line CSS for IE and Others? - Stack Overflow

3 Answers 3

更多相关文章