title: Force browsers to load CSS before showing the page
body: <p>I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).</p>
  
  <p>Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and <em>then</em> render the content? I've seen something about including the CSS files outside the <code>head</code>, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.</p>
  
  <p>Thanks!</p>
  
  <h2>Update</h2>
  
  <p>Here's the source</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;title&gt;Albite BOOKS mobile&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/&gt;
      &lt;meta name="description" content="Free e-books for Java Mobile phones."/&gt;
      &lt;meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/&gt;
      &lt;meta name="language" content="en_GB"/&gt;
      &lt;meta name="classification" content="public"/&gt;
  
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
      &lt;link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;!-- .... --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>