80400

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.

<strong>EDIT:</strong>

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.

Answer1:

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

Answer2:

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.

Answer3:

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

Recommend

  • How to set first Image after Some Text in Email body?
  • How to set first Image after Some Text in Email body?
  • Use RDF API (Jena, OpenRDF or Protege) to convert OpenIE outputs
  • Paypal does not show item list [Multiple] after redirection to Paypal Website by SetExpressCheckout
  • Mootools: how fired a function (or more functions) after the end of a tween or morph FX or other eve
  • Seemlessly layering transparent sprites in OpenGL ES
  • windows batch file combine csv in a folder by column
  • WPF Animation doesn't run first time
  • How to avoid or stop multiple ajax request
  • Cannot style mat-tab without ::ng-deep and !important
  • Pyglet uses too much cpu
  • Encrypting credit card details using AngularJS in Braintree
  • F#: In which memory area is the continuation stored: stack or heap?
  • ThreadStatic in asynchronous ASP.NET Web API
  • Python pickle not one-to-one: different pickles give same object
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • Access Android Market through SSH tunnel
  • How to define custom class, title, and target in Link Browser for content elements and the new rte_c
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Word Open XML Mail Merge
  • Meteor helpers not available in Angular template
  • Get data from AJAX - How to
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Adding a button at the bottom of a table view
  • How to extract text from Word files using C#?
  • Updated Ionic CLI but shows previous version (Windows)
  • Javascript + PHP Encryption with pidCrypt
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Transpose CSV data with awk (pivot transformation)
  • Proper way to use connect-multiparty with express.js?
  • Qt: Run a script BEFORE make
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • Append folder name and increment by 1 using batch script
  • Does armcc optimizes non-volatile variables with -O0?
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Android Heatmap on canvas or ImageView