Preprocess CSS (met PHP)

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Ik vroeg me af of het mogelijk is met PHP in een stylesheet te werken. Ik zal een voorbeeldje geven (dit is niet wat ik wil gaan gebruiken, maar even ter verduidelijking).

Stel, ik wil elke dag een andere achtergrondkleur voor mijn pagina. Op maandag groen, op dinsdag blauw, etc.

Nu leek het mij handig om zoiets te kunnen doen:

PHP: 
<?php
	header('Content-type: text/css');
?>

/* Dit is gewoon een CSS-file, met een hoop CSS */

body {

  background: <?php echo if ( $day == 'monday' ) { '#0f0' } elseif ( $day == 'tuesday' ) { echo '#00f' }; ?>;

}

Wat dus mijn idee was, je forceert met PHP dat de content wel als een 'echte' css pagina verstuurd wordt, maar de PHP erin wordt wel geparsed. Dit leek mij redelijk logisch, aangezien de browser door PHP gegenereerde image (dus met .php extensie) wel als image herkent aan de header.

Met CSS werkt dit niet op deze manier.

Iemand enig idee of het op enige manier toch mogelijk is?

PS, ik weet dat ik inline-styles of stijlblokken in m'n head kan gebruiken, maar dat is niet m'n bedoeling.
 
Waarom niet gewoon in je CSS die stylesheet opnemen?

Code: 
#Mon {

}

#Tue {

}

#Wed {

}

/* etc */
Vervolgens in je body-tag via PHP de juiste ID laten parsen.

PHP: 
<body id="#<?php echo date('D'); ?>">
Iets in die trend… Of is dat ook je bedoeling niet?
 
Nou nee, het was eigenlijk maar een voorbeeld.

Ik ben bezig met een (vrij nutteloze) applicatie, gewoon zodat ik eens wat technieken kan uitproberen, die je op een normale website nooit nodig hebt. Daar heb ik een klokje, en de cijfers worden daar aangegeven door de positie van de achtergrond afbeelding.

I know, klinkt ingewikkeld en omslachtig, maargoed:

dit is die afbeelding:

clock.png


En nu wil ik eigenlijk in m'n CSS dus de positie van die afbeelding vastleggen aan de hand van de huidige tijd. Nu zou ik dit dus op de pagina waar de klok op staat kunnen doen met inline-styles / stijlblokken, maar dat wil ik liever niet.

Maar wat ik vreemd vind is dat ik bij een afbeelding wel kan forceren dat een PHP-pagina als een JPEG-afbeelding wordt gezien, maar dat ik niet kan forceren dat een PHP-pagina als CSS wordt gezien. Of moet ik misschien een andere header dan "text/css" meegeven.

Ik begrijp dat dit nu nogal ingewikkeld klinkt, maar ik kom er zelf ook niet meer helemaal uit ;)
 
Verrek, na een keer Ctrl+F5 wil het wel :eek:

Het is wel een uitkomst zeg, dat het gewoon blijkt te kunnen.

Anyway, als het kan mag je dit topic van mij wel weer verwijderen. :eek:
 
Zou je de uiteindelijk werkende voorbeeld-code hier willen plaatsen :)

Zullen ongetwijfeld mensen wat van op steken en kan wellicht je uitleg wat beter te begrijpen maken ;)
 
Uiteraard,

Mijn CSS-file:

Code: 
<?php
	header('Content-type: text/css');
?>

<?php

	$hours = date('G');
	$minutes = date('i');
	
	$offset = array ( "-207", "-184", "-161", "-138", "-115", "-92", "-69", "-46", "-23", "-0" );

?>

/* EBOS DATETIME STYLESHEET */

div#datetime {
	
	width: 200px;
	height: 43px;
	position: absolute;
	right: 30px;
	bottom: 30px;
	
}

div#datetime #left {
	height: 100%;
	width: 9px;
	background: url(images/datetime.png);
	float: right;
}

div#datetime #datetimemain {
	height: 100%;
	padding-right: 9px;
	background: url(images/datetime.png) 100% 0%;
	float: right;
}

div.timedisplay{
	float: left;
	width: 16px;
	height: 23px;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
}

div.timeseparator {
	width: 4px;
	height: 23px;
	float: left;
	background: url(images/timesep.png) 0 0;
	margin: 10px 3px 0px 3px;
}

div.timedisplay.time1 img{
	position: absolute;
	top: <?php echo $offset[ $hours{0} ]; ?>px;
}

div.timedisplay.time2 img{
	position: absolute;
	top: <?php echo $offset[ $hours{1} ]; ?>px;
}

div.timedisplay.time3 img{
	position: absolute;
	top: <?php echo $offset[ $minutes{0} ]; ?>px;
}

div.timedisplay.time4 img{
	position: absolute;
	top: <?php echo $offset[ $minutes{1} ]; ?>px;
}

En die wordt in de pagina aangeroepen middels:

HTML: 
<link rel="stylesheet" type="text/css" href="style/datetime.css.php" />

Het staat online op http://www.erikbooy.nl/EBOS/

Nogmaals, het is een beetje een onzin project, puur om eens met wat andere technieken te kunnen werken. Kritiek is uiteraard welkom, maar houd er dan wel rekening mee, dat dit niet een commercieel project of iets dergelijks is.

Overigens, als je nu op de cijfers van de klok klikt (waar mijn vraag over ging), dan zie je dat de cijfers "verschuiven", dat gaat straks automatisch aan de hand van de tijd (d'oh), en daarom geef ik die cijfers ook met die ene afbeelding weer.

[EDIT]
PS, ja ik heb het idee afgekeken van eyeOS en ja, ik weet dat ik daar nooit aan kan tippen ;)
[/EDIT]
 
Laatst bewerkt:
Je kunt ook in je webserver aanpassen dat hij .css files moet parsen voor het inladen, dan kun je de file gewoon .css noemen en er alsnog PHP in verwerken; voor het geval er browsers zijn die geen fan zijn van een .css file die eindigd op .php, maar als het op deze manier in alle browsers werkt is dat een beetje overkill ;)
 
Hee, dat is ook nog wel eens een goed idee ja. Daar had ik nog niet aan gedacht!

Nice thinking! ;)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan