Forums

Pages sometimes flash without CSS applied

Permalink
I'm just getting my site together on C5. I notice that sometimes when navigating through the pages I've created so far, that they flash without any CSS applied first for a split second and then readjust with CSS. Has anyone else had this happen? Is there anything I can do about it? I notice it more in FF than IE.

URL: http://www.webctest.org
CSS:http://www.webctest.org/index.php/tools/css/themes/WEBC_Theme/style...
 
andrew replied on at Permalink Reply
andrew
You might try calling the CSS via this call:

<?=$this->getThemePath()?>/styles.css

instead of

<?=$this->getStyleSheet('styles.css') ?>

and see if that helps at all. If you don't have any customizable styles in your theme the second call isn't necessary, and sometimes it can slow down loading of the stylesheet.
watersedge replied on at Permalink Reply
I implemented your suggestion in my header.php, but it's still doing it. Does it have something to do with the CSS being referenced in the header.php which is in turn referenced in the default.php?
jizzle replied on at Permalink Reply
jizzle
Sounds like a browser cache issue to me. Clear your FF and/or IE cache and give it a go.

Edit: No issues with your site on my end.
watersedge replied on at Permalink Reply
I have tried that clearing cache in both browsers. Are you seeing this at all?
http://www.webctest.org
Mnkras replied on at Permalink Reply
Mnkras
loaded fine for me, but i have seen what you mean when i make my own themes, using getthemepath btw
watersedge replied on at Permalink Reply
Yeah, I tried both methods for calling the style sheet and got that flashing both times. But it's not all the time nor on all pages. It seems random
andrew replied on at Permalink Reply
andrew
Are you sure it's related to concrete5 ?

http://www.bluerobot.com/web/css/fouc.asp...

This has been an issue with sites for certain browsers with certain stylesheets for a long time.
watersedge replied on at Permalink Reply
Well I personally as a web designer/developer have never had it happen before when I've created sites with html/php and css. This is my first time seeing it. I will read the article you attached.
andrew replied on at Permalink Reply
andrew
Hmm, are you sure? I look at the source of the page and I see

"/index.php/tools/css/themes/WEBC_Theme//styles.css"

when, if you switched out the methods above, it would look like

"themes/WEBC_Theme/styles.css"

instead. I do believe that, even if this doesn't solve the complete issue, it will speed-up rendering time on the site.
watersedge replied on at Permalink Reply
Hmmm...? This is the way my CSS is referenced now:
<link rel="stylesheet" href="<?=$this->getThemePath()?>/styles.css" type="text/css" media="all" />

I did this as per the previous post above.
andrew replied on at Permalink Best Answer Reply
andrew
Hmm. Did something not get uploaded then? Because when I go to

http://webctest.org/

and view source, I see this:

<link rel="stylesheet" href="/index.php/tools/css/themes/WEBC_Theme//styles.css" type="text/css" media="all" />

Which is the product of running $this->getStyleSheet('styles.css');

$this->getThemePath() would not include "index.php/tools/css/" in it.
watersedge replied on at Permalink Reply
Argh! I had an older folder of "elements" and I must have been uploading the wrong header.php. Cuz I just uploaded the right one and now it is great and I get that shorter path in the page. Phew! Thank you so much for you tenacity and knowledge!
xzab replied on at Permalink Reply
I had the same issue and this fix worked great for me. However, all of my background images broke because I had it in a /css/ folder and using the <?=$this->getStyleSheet('styles.css') ?>
fixed those before.

I just put my css on the root and I didn't have to go change every reference to background images. So this makes me think that the processing time comes from the getStyleSheet() function parsing and fixing all of the URLs w/ the theme path..
jordanlev replied on at Permalink Reply
jordanlev
You can have your stylesheet in a subfolder -- just pass it along with the filename, for example:
<?php echo $this->getStyleSheet('css/styles.css'); ?>


Another thing to beware of (although may not have been a problem for you in this case) is that any url's referenced in your stylesheet (like for background images) can NOT be surrounded by quotes -- for example:
body {
  background-image: url('../images/bg.jpg'); /* This does NOT work */
  background-image: url(../images/bg.jpg); /* This DOES work */
}


Hope that helps.

-Jordan
Fernandos replied on at Permalink Reply
Fernandos
By the way your problem is Flash of Unstyled Content (FOUC) which has been discussed a long time ago. And there are solutions for it. You can go read it here.
http://www.bluerobot.com/web/css/fouc.asp/...

How do I vanquish the FOUC? (How do I fix it?)
Just one LINK element or SCRIPT element inside a document's HEAD element will prevent a flash of unstyled content.

<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>


<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>
invision replied on at Permalink Reply
invision
The default installation of C5 doesn't use any @import CSS commands. I'm getting this problem even though I have a print media CSS link in the head -- doesn't do the trick.

I think this fix mentioned on another thread might work. It suggests moving the 
<?php Loader::element('header_required'); ?>


before any theme-added css links.

Just tried it... only time will tell.

http://www.concrete5.org/community/forums/customizing_c5/flash_of_u...

Sherm Stevens
http://www.invision-studios.com