Custom CSS in Customer Portal without "repainting" flicker

Question

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.

Thanks!

Answer 1

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.

Answer 2

are you using onready in jquery to wait until the page has loaded to interact with the DOM? some things to consider:

1. get your javascript to execute as early in the page load as possible, but after the stanard css references.
2. dynamically remove the standard css reference elements. OR
3. override them by placing your css reference after the standard and liberally dose your css code with !important

Answer 3

Due to the way you are trying to alter the css you will always see a flicker. This is because the javascript will not run until the browser has started loading the HTML and is starting to render. The flicker will shorten after you have loaded the page because the browser will have cached any image files used in your css and the css file you dynamically selected.

I would suggest you create a css file that contains any rules that are generic to all your styles. That way the css you dynamically load will be small and have less changes to make. This should lessen the effect of the flicker but not remove it. I would almost go as far as having css rules in here that remove the salesforce standard image / styles completely so that at least this isnt flashed before your javascript has a chance to set the correct image and styles dynamically.

Also as suggested in another answer make sure you are not containing your javascript in an onLoad function unless your javascript really needs to wait till the page has loaded.