Using a .php file as a stylesheet

S

shant93

Member
Messages
119
Reaction score
0
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:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Maybe because external stylesheets don't use xml and including a doctype tag causes the browser to abort processing the file?
 
S

shant93

Member
Messages
119
Reaction score
0
Points
16
I tried using two identical external files, one as .css and the other as .php, and only the .css worked.
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
What happens when you try to access the .php file directly?
 
S

shant93

Member
Messages
119
Reaction score
0
Points
16
It loads properly and the browser interprets it as HTML code. Both with and without generated content.
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Got URL?

Got script?

Got plain text?
 
Last edited:
S

shant93

Member
Messages
119
Reaction score
0
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:
S

shant93

Member
Messages
119
Reaction score
0
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.
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Well, without the code etc, I have no idea.
 
S

shant93

Member
Messages
119
Reaction score
0
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.
 
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
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?
 
vv.bbcc19

vv.bbcc19

Community Advocate
Community Support
Messages
1,524
Reaction score
92
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
 
lemon-tree

lemon-tree

x10 Minion
Community Support
Messages
1,420
Reaction score
46
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.
 
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
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.
 
S

shant93

Member
Messages
119
Reaction score
0
Points
16
Thanks.
I hadn't realised the broswer actually checks the content-type regardless of the extension.
 
leafypiggy

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
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.
 
S

shant93

Member
Messages
119
Reaction score
0
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:
A

aakbar9372

New Member
Messages
6
Reaction score
0
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.
 
You must log in or register to reply here.
Top