<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Wishu-Blog &#187; Variablen</title>
	<atom:link href="http://wishu-blog.net/tag/variablen/feed/" rel="self" type="application/rss+xml" />
	<link>http://wishu-blog.net</link>
	<description>Tipps &#38; Tricks zum Thema Webdesign und Webdevelopment</description>
	<lastBuildDate>Wed, 23 May 2012 13:00:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Variablen in CSS benutzen – PHP machts möglich</title>
		<link>http://wishu-blog.net/2009/06/variablen-in-css-benutzen-php-machts-moglich/</link>
		<comments>http://wishu-blog.net/2009/06/variablen-in-css-benutzen-php-machts-moglich/#comments</comments>
		<pubDate>Tue, 09 Jun 2009 08:30:56 +0000</pubDate>
		<dc:creator>Wishu Kaiser</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[htaccess]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Variablen]]></category>

		<guid isPermaLink="false">http://wishu-blog.net/?p=814</guid>
		<description><![CDATA[CSS-Dateien werden mit der Zeit immer länger und unübersichtlicher. Zudem kommt, dass sich bestimmte Farben, Breiten, Schriftgrößen oder ähnliches immer wieder wiederholen. Wenn man diese dann irgendwann ändern möchte, dann muss man immer das komplette Dokument durchsuchen um wirklich alles &#8230; <a href="http://wishu-blog.net/2009/06/variablen-in-css-benutzen-php-machts-moglich/">Weiterlesen <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-816" title="CSS" src="http://wishu-blog.net/wp-content/uploads/2009/06/200px-csssvg.png" alt="CSS" width="130" height="146" />CSS-Dateien werden mit der Zeit immer länger und unübersichtlicher. Zudem kommt, dass sich bestimmte Farben, Breiten, Schriftgrößen oder ähnliches immer wieder wiederholen. Wenn man diese dann irgendwann ändern möchte, dann muss man immer das komplette Dokument durchsuchen um wirklich alles zu ändern. Eine nervenaufreibende Tätigkeit, welche durch Variablen im CSS erleitert werden kann. Die einfache Verwendung von PHP in CSS-Dateien kann einem dabei helfen sein Stylesheets oder seine Stylesheets leichter zu managen.</p>
<p><span id="more-814"></span>Durch einen Beitrag bei <a target="_blank" title="Dr.Web:Variablen in CSS: Werkzeuge und Lösungsansätze" rel="nofollow" href="http://www.drweb.de/magazin/variablen-in-css-werkzeuge-und-losungsansatze/" target="_blank">Dr. Web</a> inspiriert, möchte ich hier mal eine etwas sinnvollere Lösung bieten um Variablen in CSS zu benutzen als dort erwähnt wird. Dort findet man folgenden Satz:</p>
<blockquote><p>Das Problem ist dabei nur, dass das Stylesheet unübersichtlicher wird, weil es nun nicht mehr abgekoppelt ist und zuerst durch einen Preprocessor &#8220;laufen&#8221; soll.</p></blockquote>
<p>Das ist aber nicht wirklich verständlich, denn die CSS-Datei kann nach wie vor einzeln darstellen. Man muss ihr lediglich beibringen <span class='wp_keywordlink'><a href="http://wishu-blog.net/category/internet/webentwicklung/" title="PHP" target="_blank">PHP</a></span> zu verstehen. Das sollte auf so ziemlich jedem Paid-Webspace möglich sein und sogar einige Freehoster lassen dies zu. Mit Hilfe einer <a target="_blank" title="Wikipedia: .htaccess" href="http://de.wikipedia.org/wiki/Htaccess" target="_blank">htaccess-Datei</a> kann man dem Server sagen, wie er bestimmte Dateien lesen soll.</p>
<p>Also brauchen wir dem Server nur zu sagen, dass er neben Dateien mit der Endung <strong>.php</strong> auch Dateien mit der Endung <strong>.css </strong>als PHP-Datei erkennen soll, bzw. dass er auch in dieser Datei das PHP parsen soll, damit man Variablen in der CSS-Datei benutzen kann. In der gleichen Anweisung kann man auch HTML-Dateien mit einschließen. Diese Anweisung würde dann so aussehen:</p>
<pre><code>AddType application/x-httpd-php php php5 php4 php3 html htm css</code></pre>
<p>Somit werden alle Dateien mit den Endungen <strong>.php</strong>, <strong>.php5</strong>, <strong>.php4</strong>, <strong>.php3</strong>, <strong>.html</strong>, <strong>.htm</strong> und mit der Endung <strong>.css</strong> auf die Liste der Dateien gesetzt, welche der Server parsen soll.</p>
<p>Jetzt sollte man sich aber nicht wundern, denn wenn man die Seite jetzt aufruft, wird kein Stylesheet geladen. Man muss der CSS-Datei nun erst wieder sagen, dass sie eine solche Datei ist und das tut man mit PHP. Dazu muss man lediglich folgendes in die CSS-Datei eintragen:</p>
<pre><code>&lt;?php
header('Content-Type:text/css');
?&gt;</code></pre>
<p>Damit weiß die CSS-Datei nun wieder, dass sie eine ist und kann es dem Browser auch so mitteilen. Darunter folgt dann ganz normal das CSS. Dieses muss nicht unbedingt in einer echo-Anweisung von PHP stehen, doch es ist platzsparender. Denn wenn das CSS einzeln steht, muss man immer wieder PHP mit <code>&lt;?php</code> öffnen, eine <code>echo</code>-Anweisung einleiten, die Variable eintragen und mit <code>?&gt;</code> wieder PHP schließen.</p>
<p>Wenn man die kompletten CSS-Anweisungen in einer echo-Anweisung mit Doppelquotes macht, braucht man an die Stellen, an die die Variable soll lediglich die Variable eintragen. Somit wird sie ausgeführt und man spart sich eine Menge Code.</p>
<p>Sobald das erledigt ist, muss man eigentlich nur noch unter dem header-Befehl die Variablen definieren. Wie das geht, sollte man bereits wissen, ansonsten findet man auch sicherlich noch eine Seite, auf der das nochmal genau beschrieben wird <img src='http://wishu-blog.net/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Wenn man das alles gemacht hat und seine Variablen bestimmt hat, fallen zukünftige Änderungen wesentlich leichter. Denn man muss erstens nicht mehr suchen, wo sich eine Anweisung versteckt, da sie alle oben sind und zweitens muss man nur noch eine Stelle im Code ändern.</p>
<p>Das war es dann auch schon wieder!<br />
Euer Wishu</p>
<p><small>Bildquelle: <a target="_blank" href="http://de.wikipedia.org/wiki/Datei:CSS.svg" target="_blank">Wikipedia</a></small></p>
<div class="betterrelated"><p><h3>Weitere Beiträge, die dich interessieren könnten</h3></p>
<ol><li> <a target="_blank" href="http://wishu-blog.net/2009/12/funktion-automatisches-generieren-des-title-tags/" title="Permanent link to Funktion: Automatisches generieren des title-Tags">Funktion: Automatisches generieren des title-Tags</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2010/07/virtualhosts-unter-xampp-einrichten/" title="Permanent link to VirtualHosts unter XAMPP einrichten">VirtualHosts unter XAMPP einrichten</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2012/02/roboto-font-von-android-ice-cream-sandwich-auf-der-eigenen-website-nutzen/" title="Permanent link to Roboto-Font von Android Ice Cream Sandwich auf der eigenen Website nutzen">Roboto-Font von Android Ice Cream Sandwich auf der eigenen Website nutzen</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-hintergrunde/" title="Permanent link to Kurzschreibweisen in CSS – Heute: Hintergründe">Kurzschreibweisen in CSS – Heute: Hintergründe</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/05/png-alphatransparenz-auch-im-internet-explorer-6/" title="Permanent link to PNG-Alphatransparenz auch im Internet Explorer 6">PNG-Alphatransparenz auch im Internet Explorer 6</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-richtungen/" title="Permanent link to Kurzschreibweisen in CSS – Heute: Richtungen">Kurzschreibweisen in CSS – Heute: Richtungen</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/08/wordpressgoogle-adsense-in-jeden-artikel-einfugen/" title="Permanent link to WordPress: Google AdSense in jeden Artikel einfügen">WordPress: Google AdSense in jeden Artikel einfügen</a>  </li>
</ol></div>]]></content:encoded>
			<wfw:commentRss>http://wishu-blog.net/2009/06/variablen-in-css-benutzen-php-machts-moglich/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

