locked
Navigation and stylesheet precedence

    Question

  • I have created a navigation app. It seems that navigation apps will load in memory all the scripts and stylesheets while you navigate to different pages. I don't have a problem with that, the issue is the stylesheet order. For example, let's say I have the home page (home.html) and another page (pageA.html) and their stylesheets (home.css and pageA.css, respectively). When I start at home, only home.css is loaded (disregard the default.css for this scenario). Navigate to pageA, pageA.css will load too. Now navigate back to home, both stylesheet files are loaded, but still in the same order - home.css and then page.css - making page.css to have higher precedence than home.css. That messes up my app because I have different styles for contenthost.

    Is that the expected behavior?


    Valentin Iliescu

    Thursday, October 18, 2012 8:13 PM

Answers

  • I don't know if that was the designed behavior, but the workaround is easy: Give your fragment a class ("pageA" works fine), and prefix all your page-specific CSS with that. It's not the prettiest thing in the world, but it works.
    • Marked as answer by Song Tian Wednesday, October 24, 2012 10:29 AM
    Thursday, October 18, 2012 8:55 PM
  • Hi Valentin,

    Yes, that's the expected behavior. As the windows store "Navigation App" template provides a single page based navigation framework, every time a new page is navigated to, new script and stylesheets are loaded, and will override the previously loaded styles if conflicted. So it is recommended that we keep those common and global styles defined in content pages(loaded via navigation in the contenthost container) consistent with the host container page. And only define styles that are specific to each content page in their own stylesheets. 


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Wednesday, October 24, 2012 10:29 AM
    Tuesday, October 23, 2012 8:24 AM
    Moderator

All replies

  • I don't know if that was the designed behavior, but the workaround is easy: Give your fragment a class ("pageA" works fine), and prefix all your page-specific CSS with that. It's not the prettiest thing in the world, but it works.
    • Marked as answer by Song Tian Wednesday, October 24, 2012 10:29 AM
    Thursday, October 18, 2012 8:55 PM
  • That's the issue - it's the contenthost not the fragment that's styled, and it's unique (defined in default.html).

    Anyway, I'll try to style the fragment instead, I'll see if it works in my scenario, thanks!


    Valentin Iliescu

    Friday, October 19, 2012 7:39 AM
  • Hi Valentin,

    Yes, that's the expected behavior. As the windows store "Navigation App" template provides a single page based navigation framework, every time a new page is navigated to, new script and stylesheets are loaded, and will override the previously loaded styles if conflicted. So it is recommended that we keep those common and global styles defined in content pages(loaded via navigation in the contenthost container) consistent with the host container page. And only define styles that are specific to each content page in their own stylesheets. 


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Wednesday, October 24, 2012 10:29 AM
    Tuesday, October 23, 2012 8:24 AM
    Moderator