ACJ’s pcss

Posted: 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.

@ACJ

I still don't have a fucking clue whatsoever why stylesheets that are processed via php won't work with XHTML1.1.

@kryptondog

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:


<?php
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]:


<?php
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.

ACJ

Comments

3 comments so far.

1/3

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

2/3

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

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

3/3

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