3

Looking at the source for the Microsoft Edge homepage, the page's stylesheet is loaded as:-

<link rel="stylesheet" type="text/css" href="https://c.s-microsoft.com/en-gb/CMSStyles/style.csx?k=eb892833-0e5a-b8c0-2921-57013ef132d9_f05cbaf8-1aa4-2e42-0beb-040a76f09433_e688a192-b2e5-4598-dec4-9340a1bb6723_6e5b2ac7-688a-4a18-9695-a31e8139fa0f_b3dad3e4-0853-1041-fa46-2e9d6598a584_fc29d27f-7342-9cf3-c2b5-a04f30605f03_a66bb9d1-7095-dfc6-5a12-849441da475c_1b0ca1a3-6da9-0dbf-9932-198c9f68caeb_ef11258b-15d1-8dab-81d5-8d18bc3234bc_11339d5d-cf04-22ad-4987-06a506090313_176b8afa-bab9-e793-c91f-d22b5a134b6e_8031d0e3-4981-8dbc-2504-bbd5121027b7_3f0c3b77-e132-00a5-3afc-9a2f141e9eae_aebeacd9-6349-54aa-9608-cb67eadc2d17_0cdb912f-7479-061d-e4f3-bea46f10a753_343d1ae8-c6c4-87d3-af9d-4720b6ea8f34_a905814f-2c84-2cd4-839e-5634cc0cc383_190a3885-bf35-9fab-6806-86ce81df76f6_9a16c79d-25f5-bdfe-5f2f-db073a7c44a9_e35b6b5f-66da-dedc-3f00-745165d9153a_469a8551-3011-f265-8b8f-5929dc69c497_788198f9-9eef-398f-9683-0cfdba85933d_bfafe587-a6ac-831e-ddf2-924fd9c72cdf_cab08b69-d2f0-1170-14b6-3c3a28953f9f" />

Digging further into the source for style.csx, the syntax of the file is scss like, for example:-

@mixin font-face($family, $set, $weight, $locals: (), $version: latest){
  $local-fonts: '';
  @if $supports-local == true {
    @each $item in $locals {
      $local-fonts: #{$local-fonts} + 'local("' + #{$item} + '"),';
    }
  }
  @font-face {
    font-family: 'wf_' + #{$family} + '_' + #{$weight};
    src: url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot');
    src: #{$local-fonts} +
         url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.eot?#iefix') format('embedded-opentype'),
         url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.woff') format('woff'),
         url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.ttf') format('truetype'),
         url('//i.s-microsoft.com/fonts/#{$family}/#{$set}/#{$weight}/#{$version}.svg#web') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

Google didn't lead me to anything which seems to pertain to csx in this context - this isn't C# and doesn't seem to relate to a jquery plugin called csx which processes css files.

So, what exactly is a csx file in this context? Does it require javascript client side processing (the page renders fine in Chrome) and is there any benefit to csx used this way over, for example, pre-compiled scss?

Community
  • 1
  • 1
rowatt
  • 421
  • 4
  • 16
  • "Does it require javascript client side processing" It would seem so, as when I disable JavaScript, all I get is a blank page. I'm not surprised. Also, there are references to .jsx files, presumably in the same vein, but all that appears to be is a minified JavaScript file. – BoltClock Aug 01 '15 at 12:53
  • Or perhaps, that the page doesn't render when JS is disabled is a red herring and completely unrelated to the .csx file - it's being served directly as text/css, and it seems that the browser is simply throwing away all the SCSS and working with whatever is left... – BoltClock Aug 01 '15 at 13:02
  • I think you are correct - the blank page when js is turned off is just a very minimalist ` – rowatt Aug 03 '15 at 07:07

1 Answers1

0

In this case .CSX is almost certainly C# scripting. What you are seeing is the generated output of that script NOT the source of the file style.csx

Fishcake
  • 10,496
  • 7
  • 44
  • 72