0

I've got a page with some content pulled down from a database in the body, up in the head i've got an external style sheet linked to format that content. On Safari (doesn't seem to happen on Chrome or Firefox) i'm getting a lovely flash of unstyled content.

I'd rather have a non-javascript fix for this, is there any way to position the external css sheet link so it gets applied before the php script runs in the body? - I would assume being at the top in head it would do this automatically, but apparently not in safari, any ideas?

<?php
require_once "../config/article_functions.php";
include "../widgets/topborder.html";
include "../widgets/banner.php";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://example.org/widgets/article.css">

<style type="text/css">
a:link {color: inherit;}      /* unvisited link */
a:visited {color: inherit;}  /* visited link */
a:hover {color: inherit;}  /* mouse over link */
a:active {color: inherit;}  /* selected link */

body, html {
    margin: 0;
    padding: 0;
    height:900px;
}

#container {
    width:990px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
}

#news_container {
    width:740px;
}

</style>
<title> TODO </title>

</head>
<body>
<div id="container">
    <?php include "../widgets/sidepanel.html"; ?>
    <div id = "news_container">
        <?php
            $uri = explode('/', $_GET['$url']);
            get_selected_news($uri[0]);
        ?>
    </div>
</div>
</body>
</html>

For a second or so i see this:

enter image description here

Then afterwards: enter image description here

Crizly
  • 971
  • 1
  • 12
  • 33
  • 1
    This shouldn't be an issue in any browser, the PHP executes on the serverside, and unless you're using ajax it's present when the page loads in the browser, and the styles should be applied immediately. – adeneo Jun 07 '14 at 16:13
  • @adeneo - http://en.wikipedia.org/wiki/Flash_of_unstyled_content - It shouldn't be but it is, I'm definitely seeing the unstyled content on screen b4 the css is applied – Crizly Jun 07 '14 at 16:17
  • 1
    I know what fouc is, and there's no quick javascript fix to this problem, nor has it got anything to do with PHP, the problem is usually something as a developer did, and Safari is known for having problems when you access certain window properties before the stylesheets have loaded etc, so you probably load scripts before styles or did something else that causes the issue, and the only way to fix it is to resolve whatever you did wrong, not add more code. – adeneo Jun 07 '14 at 16:33
  • @adeneo and i forgot to say I'm using no scripts at all, just html, php, css. – Crizly Jun 07 '14 at 16:33
  • If you're not using any scripts, I can't for the life of me understand why you're having this issue, or how on earth you would fix it ? – adeneo Jun 07 '14 at 16:34
  • 2
    An old post from the Safari blog has a little more on how fouc works etc -> https://www.webkit.org/blog/66/the-fouc-problem/ – adeneo Jun 07 '14 at 16:35
  • @Crizly: Why did you tag the question [tag:javascript], then? Please, show us the code and not only pictures. – Bergi Jun 07 '14 at 16:35
  • 2
    Um, do I see this right that you're including at least two html files (`topborder` and `navbar`) *before* the doctype declaration? This looks like really malformed HTML! Maybe show us the output of the PHP engine, i.e. the response that the browser sees. – Bergi Jun 07 '14 at 16:45
  • @Bergi - damnit i thought i'd gone through all the pages and fixed that, the FOUC has now stopped, i thank you! If u wana stick it in some kind of answer so i can tick it :P – Crizly Jun 07 '14 at 16:48

1 Answers1

4
<?php
include "../widgets/topborder.html";
include "../widgets/navbar.html";
?>

<!DOCTYPE html>
<html>
<head>
…

Bad boy! No wonder Safari is confused when it gets HTML before the doctype declaration. Maybe it even gets a closing </html> tag before it does see your stylesheet?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375