Using a .php file as a stylesheet

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by shant93, Dec 28, 2010.

  1. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    I have successfully used in the past .php files as external stylesheets (instead of .css), but i discovered that when I include a doctype tag (I forget which doctype), this does not work anymore. Is there any reason for this?

    (Tested on Chrome, Firefox and Opera)
     
    Last edited: Dec 28, 2010
  2. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    Maybe because external stylesheets don't use xml and including a doctype tag causes the browser to abort processing the file?
     
  3. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    I tried using two identical external files, one as .css and the other as .php, and only the .css worked.
     
  4. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    What happens when you try to access the .php file directly?
     
  5. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    It loads properly and the browser interprets it as HTML code. Both with and without generated content.
     
    Last edited: Dec 28, 2010
  6. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    Got URL?

    Got script?

    Got plain text?
     
    Last edited: Dec 28, 2010
  7. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    No, it's on local server, but anyways, I made sure there was no other problem, and that the doctype was the only thing causing the issue.
    I just wanted to know why doctype declerations would go against that.
     
    Last edited: Dec 28, 2010
  8. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    Then, why add the doctype?
     
  9. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    Oh, that was accidental, I was lazy and pasted some header code from a tut I was reading and had a doctype decleration, and it took me two long frustrated hours to figure out the issue. Just curious and would like to know more so that I, and others, can avoid this in the future.
     
  10. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    Well, without the code etc, I have no idea.
     
  11. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    I tried this with the
    - HTML 4.01 Strict
    - HTML 4.01 Transitional
    - HTML 4.01 Frameset
    - XHTML 1.0 Strict
    - XHTML 1.0 Transitional
    - XHTML 1.0 Frameset
    doctypes. The .php stylesheet did not work with any of them, and the .css one worked with every single one. The contents of the .php and .css stylesheets are identical

    -----

    Code for the main page:
    Code:
    [COLOR="#4169e1"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">[/COLOR]
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title>Grid CSS test</title>
            <link rel="stylesheet" type="text/css" href="[COLOR="red"]gridstyle.php[/COLOR]">
        </head>
        <body>
            <div class="pa container s1 tcolfff">Hello World</div>
                <div class="pa bk s1"></div>
            <div class="pf container s2 tcol000">Lorem ipsum dolor sit amet, [...] anim id est laborum.</div>
            <div class="pa container s3 tcolfff">Hello</div>                
                <div class="pa bk s3"></div>
        </body>
    </html>
    
    Blue: example HTML 4.01 Strict Doctype
    Red: gridstyle.php or gridstyle.css

    -----

    Code for the external stylesheet:
    Code:
    /*****  Browser Reset *********************************************************/
    
    body {background: none; margin: 0; padding: 0;}
    
    /******************************************************************************/
    
    #containeroo {width: 800px; padding: 0; margin: 0; margin-left: auto; margin-right: auto;}
    
    .bk000 {background-color: #000;}
    
    .box {position: relative;}
    
    .l0 {left: 0px;}
    .l1 {left: 100px;}
    .l2 {left: 200px;}
    .l3 {left: 300px;}
    .l4 {left: 400px;}
    .l5 {left: 500px;}
    .l6 {left: 600px;}
    .l7 {left: 700px;}
     
    .w1 {width: 100px;}
    .w2 {width: 200px;}
    .w3 {width: 300px;}
    .w4 {width: 400px;}
    .w5 {width: 500px;}
    .w6 {width: 600px;}
    .w7 {width: 700px;}
    .w8 {width: 800px;}
     
    .h0 {height: 0px;}
    .h5 {height: 50px;}
    .h10 {height: 100px;}
    .h15 {height: 150px;}
    .h20 {height: 200px;}
    .h25 {height: 250px;}
    .h30 {height: 300px;}
    .h35 {height: 350px;}
    .h40 {height: 400px;}
    .h45 {height: 450px;}
    .h50 {height: 500px;}
    .h55 {height: 550px;}
    .h60 {height: 600px;}
    .h65 {height: 650px;}
    .h70 {height: 700px;}
    .h75 {height: 750px;}
    .h80 {height: 800px;}
    .h85 {height: 850px;}
    .h90 {height: 900px;}
    .h95 {height: 950px;}
    .h100 {height: 1000px;}
     
    .t0 {top: 0px;}
    .t1 {top: 100px;}
    .t2 {top: 200px;}
    .t3 {top: 300px;}
    .t4 {top: 400px;}
    .t5 {top: 500px;}
    .t6 {top: 600px;}
    .t7 {top: 700px;}
    .t8 {top: 800px;}
    .t9 {top: 900px;}
    .t10 {top: 1000px;}
    .t11 {top: 1100px;}
    .t12 {top: 1200px;}
    .t13 {top: 1300px;}
    .t14 {top: 1400px;}
    .t15 {top: 1500px;}
    .t16 {top: 1600px;}
    .t17 {top: 1700px;}
    .t18 {top: 1800px;}
    .t19 {top: 1900px;}
    .t20 {top: 2000px;}
    
    .coufont {font-family: Courrier New, Monospaced;}
    
    /**********************************************************************************/
    
    .pa {position: absolute;}
    .pf {position: fixed;}
    .pr {position: relative;}
    
    .container {width: 800px; padding: 0; margin: 0 auto 0 auto;}
    
    .bk {width: 100%; padding: 0; margin: 0; background-color: #000;}
    
    .s1 {top:    0px; height:  200px;}
    .s2 {top:  200px; height:  300px;}
    .s3 {top:  500px; height:  100px;}
    
    .tcol000 {color: #000;}
    .tcolfff {color: #fff;}
    -----

    I know there may be some bugs with the CSS and the HTML, I was just trying out things.
     
  12. descalzo

    descalzo Grim Squeaker Community Support

    Messages:
    9,375
    Likes Received:
    327
    Trophy Points:
    83
    I think we had a miscommunication.

    Style sheet file contents did not change.
    You did change the extension.

    HTML file without DOCTYPE accepted and used css files with .php extension.

    HTML file with DOCTYPE would not use css files with .php extenstion.

    Right?
     
  13. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
  14. vv.bbcc19

    vv.bbcc19 Community Advocate Community Support

    Messages:
    1,524
    Likes Received:
    92
    Trophy Points:
    48
    I understood that you are Dynamically generating CSS with PHP
    In that case you should be using php 5 or higher.
    And the doctype is HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    It gets scattered in IE7 and opera 9 but not in firefox.
    Just upgrade all browsers and let the browsers know the latest develpments in PHP
    Your problem will be solved.
    Regards,
    VVBB
     
  15. lemon-tree

    lemon-tree x10 Minion Community Support

    Messages:
    1,420
    Likes Received:
    46
    Trophy Points:
    48
    The problem is that when you add a doctype you are telling the browser to which standard it must conform. If the browser decides that .php files as CSS are non-conformant then they will be ignored. When you don't set a doctype the browser is free to interpret which it sees fit.
    So, the simple solution here is to use a .htaccess to rename your .php files to css and send a header in the PHP.

    In the .htaccess in the same folder as the php as css file:
    Code:
    RewriteRule ^gridstyle\.css$ gridstyle.php
    
    In the HTML file:
    Code:
    <link rel="stylesheet" type="text/css" href="gridstyle.css">
    
    At the top of gridstyle.php:
    Code:
    header("Content-type: text/css");
    
    As far as the browser is now concerned, that CSS file was not made by PHP.
     
  16. essellar

    essellar Community Advocate Community Support

    Messages:
    3,295
    Likes Received:
    227
    Trophy Points:
    63
    Simply sending a content-type header should fix the MIME type problem on the PHP CSS file. Without it, the restricted accept-type list the doctype declaration forces will cause a conflict. The file extension does not have to be .css; that extension merely forces Apache to add a text/css content-type header.
     
  17. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    Thanks.
    I hadn't realised the broswer actually checks the content-type regardless of the extension.
     
  18. leafypiggy

    leafypiggy Manager of Pens and Office Supplies Staff Member

    Messages:
    3,819
    Likes Received:
    163
    Trophy Points:
    63
    Excuse my ignorance, but:

    Why in God's name would you ever need/want to use a .php file as .css? I don't understand the reasoning whatsoever. It makes zero sense.
     
  19. shant93

    shant93 Member

    Messages:
    119
    Likes Received:
    0
    Trophy Points:
    16
    If you see in the example I gave, I have 20 classes for possible values of height:

    Code:
    .h0 {height: 0px;}
    .h5 {height: 50px;}
    .h10 {height: 100px;}
    .h15 {height: 150px;}
    .h20 {height: 200px;}
    .h25 {height: 250px;}
    .h30 {height: 300px;}
    .h35 {height: 350px;}
    .h40 {height: 400px;}
    .h45 {height: 450px;}
    .h50 {height: 500px;}
    .h55 {height: 550px;}
    .h60 {height: 600px;}
    .h65 {height: 650px;}
    .h70 {height: 700px;}
    .h75 {height: 750px;}
    .h80 {height: 800px;}
    .h85 {height: 850px;}
    .h90 {height: 900px;}
    .h95 {height: 950px;}
    .h100 {height: 1000px}
    That can be a lot easier to manage and work with, if you use a php for loop:

    Code:
    <?php
      foreach (range(0,100,5) as $id)
      { 
          echo (".h" . $id . " {height: " . 10*$id . "px;}\n");
      }
    ?>
    Or, you can send values around through the address of the .php stylesheet. I made a page with randomly a randomly generated color (http://wsup.tk - under construction), and the reference to the css has the color in it. If the generated color is, say, #44dd88, the css reference would be:

    Code:
    <link rel="stylesheet" type="text/css" href="style.php?col=4d8">
    And there are a whole other list of things you could posibly do. off the top of my head, you could probably send screen width values using javascript and the GET method.
     
    Last edited: Dec 30, 2010
  20. aakbar9372

    aakbar9372 New Member

    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    0
    maybe the browser is forced to interpret any .css files as stylesheet while .php not. If you go to .php site and .html site then you press back button, you should know that the source code of html pages are cached while .php pages are not. So, the browser is programmed to handle some extensions differently.
     

Share This Page