Advance CSS Server Side parsed mit PHP

Vorwort

Was soll Advance CSS Server Side parsed mit PHP bedeuten? Man parsed CSS Dateien Server seitig mit PHP.

Die Vorteile dabei liegen klar auf der Hand. Es ist nun zum Beispiel möglich Variablen einzuführen. Variablen für Farben oder geziehlt einzelne Browser anzusprechen.

Nachteile können eine erhöte Zahl von Requests oder Caching-Schwierigkeiten sein.

Im folgenden erklär ich die dafür notwendigen Schritte anhand der Technik die ich bei gedit.NET verwende.
Geeignet ist dieser Artikel für Sie:

Wenn Sie Erfahrung mit HTML, CSS und PHP haben.
Wenn Ihr Webserver PHP unterstützt.

Serverseitige Vorbereitung

In meinem Fall habe ich mich dafür entschieden die Dateiendung für Cascading Style Sheets beizubehalten. Natürlich ist es auch möglich Dateien mit der Dateiendung .php als Style Sheet einzubinden.

Das Apache CSS Dateien mit PHP parsed, ist es notwendig in der httpd.conf oder in einer .htaccess die folgende Direktive anzulegen:

.htaccess

...

AddType application/x-httpd-php .css

...

Die .htaccess sollte Sie am besten im Style Sheet Ordner anlegen, da .htaccess Direktive sich auf alle Dateien und Unterordner auswirken.

Das CSS Dateien fehlerfrei mit PHP geparsed werden ist es notwendig, dass Sie den Header am Anfang der Datei bestimmen. Desweiteren halte ich es für sinnvoll Funktionen, Schleifen und Konfigurations Variablen in eine externe PHP Datei auszulagern, welche problemlos in jeden Style Sheet included werden kann.

Die include Datei welche zwecks der Übersichtlichkeit, Funktionen, Schleifen oder Abfragen beinhaltet.

css.inc.php

<?php
/* 
 * gedit.net
 * CSS
 * /css/gedit.net/
 * 2005/2006/2007/2008 Simon Gattner
 * Kontakt: http://gedit.net/Kontakt
*/

// header data

if ($_GET['gzip'] == 'true' )
{
/* initialize ob_gzhandler to send and compress data */
ob_start ("ob_gzhandler");
/* initialize compress function for whitespace removal */
ob_start("compress");
/* required header info and character set */
header("Content-type: text/css;charset: UTF-8");
/* cache control to process */
header("Cache-Control: must-revalidate");
/* duration of cached content (1 hour) */
$offset = 60 * 60 ; 
/* expiration header format */
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
/* send cache expiration header to broswer */
header($ExpStr);
}
else
{
// Header
header("Content-type: text/css;charset: UTF-8");

// Make the .css Header Comment

$str = $_SERVER['PHP_SELF'];
$parts = preg_split('[/]', $str);

// Browser IE

if ( $parts[4] == 'ie' )
{
	$browser = 'IE';
	if ( is_numeric( $parts[5] ) )
	{
		$browser .= ' ' . $parts[5];
	}
}
else
{
	$browser = 'ALL';
}
echo <<< EOF
/* css.
                      888 ,e,   d8       Y88b Y88 888'Y88 88P'888'Y88 
 e88 888  ,e e,   e88 888  "   d88        Y88b Y8 888 ,'Y P'  888  'Y 
d888 888 d88 88b d888 888 888 d88888     b Y88b Y 888C8       888     
Y888 888 888   , Y888 888 888  888   d8b 8b Y88b  888 ",d     888     
 "88 888  "YeeP"  "88 888 888  888   Y8P 88b Y88b 888,d88     888     
  ,  88P                                                              
 "8",P"                                                             */

EOF;
echo "n";
echo '/* <http://'. $_SERVER['HTTP_HOST'] .'/>' . "n";
echo ' * Copyright 2006/2007/2008 Simon Gattner' . "n";
echo ' * This work is licensed under a Creative Commons Attribution-' . "n";
echo ' * NonCommercial 3.0 License.' . "n";
echo ' * Licence: <http://gedit.net/CC>' . "n";
echo ' * Contact: <http://gedit.net/Kontakt>                          */' . "nn";
echo '/* <http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '>' . "n";
echo ' * Page:         ' . $parts[1] . "n";
echo ' * Style:        ' . $parts[2] . "n";
echo ' * Media:        ' . $parts[3] . "n";
echo ' * Browser:      ' . $browser . "n";
echo ' * FileName:     ' . end($parts) . "n";
echo ' * FileSize:     ' . round( filesize(end( $parts ))/1024, 1 ) . " KBn";
echo ' * LastModified: ' . date( "d.m.Y, H:m T", filemtime(end( $parts )) ) . '                             */' . "nn";
}

// Compress function

/* Begin function compress */
	function compress($buffer) {
	/* remove comments */
		$buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
	/* remove tabs, spaces, new lines, etc. */        
		$buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
	/* remove unnecessary spaces */        
		$buffer = str_replace('{ ', '{', $buffer);
		$buffer = str_replace(' }', '}', $buffer);
		$buffer = str_replace('; ', ';', $buffer);
		$buffer = str_replace(', ', ',', $buffer);
		$buffer = str_replace(' {', '{', $buffer);
		$buffer = str_replace('} ', '}', $buffer);
		$buffer = str_replace(': ', ':', $buffer);
		$buffer = str_replace(' ,', ',', $buffer);
		$buffer = str_replace(' ;', ';', $buffer);
		
	return $buffer;
	}

// Get the Colors

// About
if ( $_GET['ctg'] == '1' )
{
	$color = 'rgb(75, 61, 62)';
}
// Impressum
elseif ( $_GET['ctg'] == '2' )
{
	$color = 'rgb(124, 125, 101)';
}

...

?>

In meinem Beispiel enthält die include Datei Header Informationen wie Content-Type, Cache-Controle oder den Expires Zeitraum, sowie Funktionen und if Abfragen um unnötige Zeichen zu entfernen oder die Farben für eine Kategorie der Webseite zu bestimmen. Browserweichen wären eine weitere Möglichkeit.

Die CSS Datei in die css.inc.php eingebunden wird.

style.css

<?php
require_once( '/path/to/css.inc.php' );
// screen all
?>

...

<?php
if( $_GET['adm'] == 'true' )
{
echo <<< EOF
/* 
 * Admin
 */
#admin {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 24px;
	background-color: $color;
}

...

EOF;
}
?>

...

#header {
	float: left
	background-color: <?php echo $color ?>;
}

Style Sheet einbinden

Das HTML Template in den der PHP geparste Style Sheet via link rel eingebunden wird.

index.html

...

<link rel="stylesheet" type="text/css" href="/css/gedit.net/v0.5/default/screen/style.9.css&amp;gzip=true&amp;adm=true" media="all">

...

Anhand der GET Variablen lassen sich verschiedene Schleifen, if Abfragen oder Funktionen in der nun geparsten CSS Datei ansprechen. Natürlich könnten Sie in das Template wiederum Abfragen oder Anweisungen integrieren, die die verschiedenen GET Variablen ansprechen.

Links und Quellen

Beispiele
- gedit.NET Style Sheet - </css/gedit.net/v0.5/default/screen/style.css>
- gedit.NET Style Sheet der ohne Überflüssige Zeichen und gzip kompremiert ausgeliefert wird - </css/gedit.net/v0.5/default/screen/style.css>
HTML
- W3C - Specifying external style sheets in HTML - <http://www.w3.org/TR/REC-html40/present/styles.html#h-14.3.2>
CSS
- Stylegala - No more CSS hacks - <http://www.stylegala.com/articles/no_more_css_hacks.htm>
- Shauninman - CSS Server-side Constants - <http://www.shauninman.com/archive/2005/08/09/css_constants>
- Wait till I - CSS Constants - <http://www.wait-till-i.com/2005/02/11/css-constants/>
- CSS discuss - Incutio - Constants in CSS - <http://css-discuss.incutio.com/?page=ConstantsInCSS>
PHP
- PHP.net - Header - <http://de.php.net/manual/de/function.header.php>
- PHP.net - GET - <http://de.php.net/manual/de/reserved.variables.get.php>

Kommentare

Hallo,
danke für den guten Tip. Das ist genau was ich gesucht habe.
Liebe Grüße Flo

Florian, Montag, 01. Dezember 2008, 19:00

Hi,The right sidebar is toucnihg the middle column in the homepage as you can see. I want to change the size same like left sidebar, not toucnihg the middle column.Thanks for reply.

Best, Freitag, 08. August 2014, 13:44