November 19 2004

Inspired and motivated by class today, but unable to put it to direct use (because of the fact DrawBot is limited to OS X enviroments), I decided to pick up another P-language related project that'd been on hold because of compatibility issues with my markup I had ran into some time ago.

I still don't have a fucking clue whatsoever why stylesheets that are processed via php won't work with XHTML1.1.
Hm... are you sending the header for the stylesheet as text/css?

D'oh! Why didn't I think of that?

Oh well, sometimes you need a little help from a friend. Here's the painfully obvious solution:

header("Content-Type: text/css; charset=UTF-8");

This little code opens a playground of its own: an extremely intensified flexability with stylesheets, now compatible with the xhtml 1.1 (+ MathML 2 + svg 1.1) markup I use throughout the site.

Consider the following code [Skip]:

header("Content-Type: text/css; charset=UTF-8");

$red = round(rand(24,128));
$green = round(rand(24,128));
$blue = round(rand(24,128));


a {
	color: rgb(<?php echo($red);?>,<?php echo($green);?>,<?php echo($blue);?>)

h1 {
	font: normal small-caps normal 10em/.5 serif;
	margin: 0;
	padding: 0;
	text-align: center

h2 {
	font-size: x-large

html {
	background: rgb(<?php echo($red);?>,<?php echo($green);?>,<?php echo($blue);?>) url(img_138) repeat

body {
	background: #fff;
	font: normal small sans-serif;
	margin: auto;
	padding: 2em;
	width: 36em

.hello {
	font-size: larger

.hello::after {
	content: ' World!';
	color: rgb(<?php echo($red);?>,<?php echo($green);?>,<?php echo($blue);?>)

This causes a random (but limited) rgb value to be rendered and applied as the color of the document background; hyperlinks; and the ' World!' string that is parsed via the css itself. img_138 is a png file (based on squidfingers' pixel pattern 138) with alpha layers, that is rendered on top of the document's background color.

I've put up a sample page for those that want to put it to the test. Refreshing the document will randomize the color that is used by the style sheet. Note: documents use css ::after pseudo-class and content attribute, and png alpha transparancy.



3 comments so far.


I've written a post regarding PHPSS a while ago on my blog. You should've read it, you would've known then :P

Now you call it "PCSS", lol.

Oh and there's no use in using charset=UTF-8 for a stylesheet, or is there?

Posted by: Mathias Bynens on November 21, 2004, at 12:23


Your preview page rocks. All of them "designs" look as good. Amazing.

Posted by: Mathias Bynens on November 21, 2004, at 12:25


I wasn't aware of the existence of your article. I'm not a big fan of that sort of browser specific transformations based on header information, as it kind of defies the phylosophy of cascading style sheets, and

Posted by: ACJ on November 21, 2004, at 19:22


Remember Me?
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.