locked
Loading CSS from ms-appdata:///local/ fails and results in invalid CSS in the DOM

    Question

  • I am using this code to load CSS from the (prohibited) location ms-appdata:///local/ manually:

    Windows.Storage.PathIO.readTextAsync("ms-appdata:///local/conf/dailyPage.css").done(function(text) {
      var style;
      style = document.createElement("style");
      style.type = "text/css";
      style.innerText = text;
      return document.head.appendChild(style);
      }, function(error) {});

    The reason is the customer should be able to change the styles until we settled on a colour scheme.

    The CSS in the file is correct, however when the STYLE node is inserted into the DOM the MSVS DOM Explorer shows it as invalid.

    It does seem to not correctly parse the properties and values. The SAME file loaded in the HTML page using a LINK tag from the ms-appx:// location does work, and displays the correct styles.

    That is the node as seen in the DOM Explorer, its the last node and the code seems ok:

    Any ideas whats going wrong?

    PS: MSFT fix that forum. The reading and especially editing experience is a shame for a SOFTWARE company! Try to enroll @discourse FTW

    Monday, February 09, 2015 10:58 PM

Answers

  • The answer is: style.sheet.cssText = cssText

    Then it works. I have also added a live refreshing feature, so that the css can be changed on disk and is reflected in the app. Check out the gist

    • Marked as answer by pkursawe Tuesday, March 10, 2015 12:23 PM
    Tuesday, March 10, 2015 12:23 PM

All replies

  • See the link:

    http://stackoverflow.com/questions/17210798/apply-downloaded-css-on-windows-8-metroui-app

    Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.

    Wednesday, February 11, 2015 2:56 AM
  • The answer is: style.sheet.cssText = cssText

    Then it works. I have also added a live refreshing feature, so that the css can be changed on disk and is reflected in the app. Check out the gist

    • Marked as answer by pkursawe Tuesday, March 10, 2015 12:23 PM
    Tuesday, March 10, 2015 12:23 PM