[SalesForce] Custom CSS in Customer Portal without “repainting” flicker

I've experimenting with the Customer Portal and figured out how to inject CSS and JS via custom code in the header. Unfortunately, on every page load there's a flicker as Salesforce first loads the default formatting and only then loads and applies my changes. (The flicker is less noticeable after the first few page loads, but still there.) Is there a good way to eliminate this flicker or to get my custom CSS to apply earlier?

FYI, I want to choose stylesheets dynamically based on which page I'm on, so rather than including <link rel="stylesheet" ... /> elements directly, I'm using Javascript to add them to the page header.


Best Answer

Two possible solutions. In your header file:

1) first load ALL stylesheets in your html, instead of dynamically, eg:

<link rel="stylesheet" type="text/css" href="ideas.css" />
<link rel="stylesheet" type="text/css" href="cases.css" />
<link rel="stylesheet" type="text/css" href="solutions.css" />

then use the body class in your CSS to differentiate the pages, eg:

body.ideaTab h3.lbHeader {}
body.caseTab h3.lbHeader {}
body.solutionTab h3.lbHeader{}

which should limit the FOUC (Flash Of Unstyled Content) to the first page load only.

OR 2) you can combine all your styles into one string and include it in a style tag:

<style type="text/css">/* ... */</style>

so that rendering will be blocked until all your styles are loaded, at the expense of making all pages heavier and probably incorporating a build step.

Related Topic