TGIMBA .NET Core – CSS ‘Beautification’ – Loading Dynamic CSS

Git  Code Commit (all commits between last post and this commit (link))

Today we will load a mobile or desktop Cascading Style Sheet (CSS) based on the type of browser using the site.  If you remember in the last post, I had updated ApplicationFlow.js -> SetLayout() with the IsMobile() server call result.  I put it in a callback so the layout was set before anything else could proceed.

The actual load is best illustrated in reference #1.  Live Document Object Model (DOM) manipulation is nothing new.  But, as I learned today, this includes the ability to load CSS files on the fly.

  • Loading the file based on if browser is classified as mobile or desktop

1

  • Verifying CSS file is loaded with test class – testBackGround (notice that Desktop.css has a value of yellow).

1

  • Verifying CSS file is loaded – Because I am using a browser classified as ‘Desktop’ by the regular expression added in an earlier post, the color is yellow.  Not particularly pretty, but it proves that this works (this is temporary markup that I will remove and is only for illustration).

1

Next will be the implemented CSS layout.

Stay tuned!

References

  1. https://stackoverflow.com/questions/2099517/how-to-load-in-an-external-css-file-dynamically
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s