Why CSS doesn't load?

Question

On certain internet connections I've found with certain sites such as Facebook, the CSS doesn't load. But then on those same connections certain sites such as StackOverflow, the site still works fine.

My question is, why does it act this way? and how can I program in such a way that it loads like StackOverflow?

Depending on the answer to the first question the second question might not be entirely relevant.

Answer 1

The CSS could be being filtered if it is on a CDN by certain router set ups, also the CSS (in the case of facebook) could be being updated and for a split second was unavailable.

Best thing in this case is to update the browser in question do a Ctrl + F5 (Windows, Linux) or Cmd + R (Mac) and force refresh the content and see if the CSS comes down.

Answer 2

I've gotten this a lot when browsing sites. And your Facebook example, yes this is a common problem among dynamic webpages. But, the first possible reason would be that the style-sheet doesn't have the right MIME-type, or it isn't set at all. Some browsers won't parse this, all imported/linked/inline style-sheets should have in their tag the attribute 'type' set to 'text/css'. The other reason is that it is the page, sometimes dynamic pages such as pages scripted in PHP are programmed to dynamically link to a specific style-sheet given a certain condition, if things aren't done right the script might never actually load a style-sheet.

If you would like to (only help) ensure that your stylesheet is loaded, make sure that your dynamic script ALWAYS loads a style-sheet, and/or that your style-sheet appears like so:

<link rel="stylesheet" type="text/css" href="theme.css" />

Or if it is inline

<style type="text/css">
    p {
        margin-left:20px;
    }
    body {
        background-image:url("img_bg.png");
    }
</style>