title: CSS @import not working with PHP
body: <p>I'm using the following html / css to try to import PHP files to act as stylesheets. This is so I can edit the styles within the stylesheets dynamically. I'm new to @import, but need it to change the stylesheet depending on the display width for the current device. Are there any obvious errors, or can I not use @import to import the source from a PHP file?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;base href="http://www.shadespeed.com/loyalty_points/" target="_blank" /&gt;
      &lt;meta name="viewport" content="width=device.width"&gt;&lt;meta charset="UTF-8"&gt;
      &lt;style type="text/css"&gt;    
          @import url('../stylesheets/stylesheet_160_low_res.php')(max-width: 319px);
          @import url('../stylesheets/stylesheet_320_small_smartphone.php')(min-width: 320px) and (max-width: 479px);
          @import url('../stylesheets/stylesheet_480_smartphone.php')(min-width: 480px) and (max-width: 767px);
          @import url('../stylesheets/stylesheet_768_tablet.php')(min-width: 768px) and (max-width: 1023px);
          @import url('../stylesheets/stylesheet_1024_monitor.php')(min-width: 1024px) and (max-width: 1279px);
          @import url('../stylesheets/stylesheet_1280_large_monitor.php')(min-width: 1280px);
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Prior to this, I've used a Javascript script which gets the display width and height and stores them in COOKIES, which PHP can read. The cookies are only set if they don't exists. The problem is, once the cookies are set, they wont change. I need them to be able to change if the page is refreshed, so the layout can change if say, the user is viewing the webpage on a tablet or smartphone, and they rotate the screen. </p>
  
  <p>EDIT: I have just got it to work, by replacing the @import urls with the full URLs of the PHP stylesheet files. </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_160_low_res.php')(max-width: 319px);
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_320_small_smartphone.php')(min-width: 320px) and (max-width: 479px);
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_480_smartphone.php')(min-width: 480px) and (max-width: 767px);
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_768_tablet.php')(min-width: 768px) and (max-width: 1023px);
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_1024_monitor.php')(min-width: 1024px) and (max-width: 1279px);
  @import url('http://www.shadespeed.com/loyalty_points/stylesheets/stylesheet_1280_large_monitor.php')(min-width: 1280px);
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I'm sure I tried this earlier, so I guess adding the headers to the PHP files was the key. Thank you very much! </p>
  
  <p>Many thanks,</p>
  
  <p>-Dan.</p>