Matu´s Blog - Webprogrammierung und jede Menge Tipps & Tricks » CSS

Dynamisches Stylesheet (Dynamic CSS)

Matu — Sun, 14 Jun 2009 19:35:21 +0000

Web 2.0 ist in aller Munde. Nachrichten werden zwischen einzelnen Webseiten ausgetauscht (Stichwort Abonnementdienste wie RSS/Atom). Weblogs schießen wie Pilze aus den Boden. Dynamische Webseiten (DHTML) sowie DOM-Scripting sind in der heutigen Zeit zum Standard geworden. Menüs klappen auf, Texte werden eingeblendet, Seiteninhalte lassen sich einfach verschieben … überall bewegt sich etwas.

Es werden Techniken eingesetzt, die Web-Anwendungen wie Desktop-Anwendungen aussehen lassen (Stichwort Ajax). Rein statische Seiten fristen in den Weiten des Internet nur noch ein Schatten-Dasein.
Und wenn wir ehrlich sind, haben wir uns daran gewöhnt.

Wir erwarten, das Webprogrammierer -und Designer die Seiten so gestalten, das sie attraktiv und „usability“ daher kommen. Das Webseiten auch körperlich beeinträchtigten Menschen zugänglich sind (Stichwort Barrierefreiheit) und nach Möglichkeit in jedem Browser … zumindest einigermaßen … ähnlich aussehen.

Es können Videos und Fotos betrachtet, Musik gehört und Spiele gespielt werden. Animationen, erstellt mit Java, Flash, Javascript oder als GIF-Bild, lassen Webseiten „leben“ (wenn sie uns nicht gerade stören).

Und da ich von diesen Dingen einfach fasziniert bin, habe ich mich daran gesetzt, dem Stylesheet meines Blogs mit Hilfe von PHP ebenfalls etwas Dynamik einzuhauchen.

Anleitung dynamisches Stylesheet
Zuerst muss die Endung der normalen Stylesheet-Datei …

style.css

… durch …

style.css.php

… ersetzt werden.
Eingebunden wird die neue dynamische Stylesheet-Datei wie gewohnt im Head-Bereich der Seite:

...

Nun wird im neuen Stylesheet innerhalb eines PHP-Blocks der Content-type angegeben, da der Server beim Parsen sonst davon ausgeht, dass es sich hierbei um eine gewöhnliche HTML-Datei handelt. Dazu wird im Kopf der css.php-Datei folgendes deklariert:

header('Content-type: text/css');
   /*
    An dieser Stelle wird der Quellcode eingefügt.
    Mehr dazu später …
   */
?>

/* Begin Typography & Colors */

body {

	font-size: 62.5%; /* Resets 1em to 10px */

	font-family: Arial, Helvetica, Sans-Serif;

	background: #063164; 

	color: #999;

	text-align: center;

	}
…

Nun „weiß“ der Server Bescheid, gibt die PHP-Datei als CSS-Datei an den Browser und dieser kann die Datei anschließend richtig interpretieren.

Erklärung

Im Gegensatz zu einer normalen Stylesheet-Datei, die der jeweilige Browser direkt durch den angegebenen Pfad im Head-Bereich der Webseite „annektiert“, wird die neue PHP-CSS-Datei zuerst vom Server (auf Grund der .php-Endung!) durch den PHP-Parser geschickt.
Dieser erkennt den eingefügten PHP-Block

und arbeitet den dort eingefügten Quellcode ab. Erst danach wird die (inhaltlich geänderte) Datei zurückgeschickt und steht nun dem jeweiligen Browser zur Verfügung. Dieser erkennt, genau wie der Besucher der Seite, durch die explizite Angabe des Content-Types eine ganz normale CSS-Datei. Der PHP-Code kann dagegen nicht eingesehen werden!

Da mir diese Webseite neben dem Bloggen auch als „Bastelstube“ dient (siehe auch mein Kolophon), um Webtechniken anzuwenden, hatte ich mir überlegt, die Hintergrundfarbe beim ersten Aufruf der Seite zufällig aus einem Pool von Hintergrundgrafiken generieren zu lassen. Diese sind bereits als PNG-Dateien auf dem Webspace hinterlegt und werden über den Name eingebunden.

   bg_hellgruen.png
   bg_blau.png
   bg_beige.png
   ...

Dazu legte ich zunächst ein Array an, in das die Namen derjenigen Grafiken einfügte wurde, die später angezeigt werden sollen.

$farben = array('weiss', 'schwarz', 'blau', 'gruen',
        'beige', 'hellblau', 'hellgruen', 'rose',
        'sand', 'grau_gruen');

Aus diesem wird ein zufälliges ausgewählt

 $zufall = array_rand($farben, 1);/* ... die 1 kann bei einem
Wert auch weggelassen werden */
 $zufalls_farbe = $farben[$zufall];

und danach in einem switch-Kontrollblock die Textfarbe an die jeweilige Hintergrundfarbe angepasst, um einen ausreichenden Kontrast zu garantieren.

switch ($zufalls_farbe) {
    case 'weiss':
     $_SESSION['textcolor'] = '#222';
        break;
    case 'beige':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellblau':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'oliv':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'rose':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellgruen':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'sand':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'grau_gruen':
      $_SESSION['textcolor'] = '#222';
        break;
    default:
      $_SESSION['textcolor'] = '#aaa';
        break;
  }

Anstatt des switch-Kontrollblocks kann natürlich auch eine if-Abfrage eingesetzt werden. Ich habe dies lediglich auf diese Art gelöst, um wieder mal mit der switch-Syntax zu arbeiten. Hinsichtlich der Geschwindigkeit dürften sich beide Möglichkeiten (auch bei größeren Datenmengen) nicht wesentlich unterscheiden (unter Programmierern führt dieser Aspekt gern zu ausufernden Diskussionen –> kürzer, schneller …).

Um die einmal ausgewählte Hintergrundfarbe während des Besuchs beizubehalten, wird noch eine Session-Variable erstellt. In dieser wird beim ersten Einlesen der css.php-Datei ebenfalls die zufällig generierte Hintergrundfarbe gespeichert.

 $_SESSION['color'] = $zufalls_farbe;

Dies wurde für die Textfarbe bereits schon im switch realisiert.
Normalerweise legt der Browser die CSS- Datei (und noch einige andere Dateien, z.B. Grafiken) im eigenen Cache-Speicher ab und ein erneutes Einlesen ist bei Seitenwechsel nicht mehr nötig. Dadurch kann die Webseite nach dem ersten Aufruf schneller geladen werden.

Da dies aber nicht garantiert ist (was mir meine Erfahrungen auch bestätigen), wird bei jedem Einlesen überprüft, ob diese Session-Variable existiert. Sollte dies der Fall sein, erfolgt keine erneute Auswahl der Hintergrundfarbe, sondern es wird dann der gespeicherte Wert der Session-Variable verwendet. Dafür wird der gesamte Quellcode in eine Abfrage eingeschlossen, welche direkt überprüft, ob die Session-Variable bereits existiert.

if(!isset($_SESSION['color'])) {
...
}
/* Nur wenn die SESSION-Variable noch nicht (!)
existiert, wird eine neue Farbe ausgewählt
*/

Nun werden die gefüllten Variablen an den jeweiligen Stellen im normalen Stylesheet-Bereich eingefügt und mit dem echo-Befehl ausgegeben.

#header {
	background: transparent url('images/layout/bg_.png') repeat-y top center;
        /* Der else-Block dient nur als Beispiel
        und dürfte nicht ausgeführt werden*/
	}
...

#content {
	font-size: 1.35em;
        color:;
	}
...

Durch diese Maßnahme bekommt jeder Besucher der Seite beim ersten Aufruf eine zufällige Hintergrundfarbe, die auch bei Seitenwechsel erhalten bleibt (es sei denn, es wird ein anderer Hintergrund über den Einstellungen-Button gewählt).

Aber anstatt der Hintergrundfarbe könnte auch der body-Hintergrund geändert werden. In dem PHP-Bereich kann das ganze Potenzial dieser Scriptsprache eingesetzt werden, um das Stylesheet den eigenen Bedürfnissen dynamisch anzupassen.
Auch eine Darstellung, welche an die jeweilige Tageszeit angepasst wird bzw. von dieser abhängig ist, kann so leicht realisiert werden (time-Funktion von PHP).

 /* H - Stunde im 24-Stunden-Format (00-23 ) */
if (date("H")>8 && date("H")<20){
$background = "#ffffff";
    $color = "#000000";
  } else {
    $background = "#000000";
    $color = "#ffffff";
  }

Doch es traten auch Probleme auf. Die Stylesheet-Anpassungen für die -Browser der Redmonder habe ich direkt im Stylesheet stehen und nicht wie sonst üblich über eine Browserweiche (Conditional Comments ) als zusätzliches Stylesheet eingebunden.
Die Separierung erfolgt über die “Holzhammer-Methode” mit dem !important-Hack:

/* Beispiel */
.navigation {
	display: block;
	text-align: center;
        /* 'Normale' Browser führen diese Zuweisung aus ... */
	margin-top: 10px !important;
        /* ... während der IE !important nicht kennt und diese
        Zuweisung interpretiert */
        margin-top:0px;
        /* Dies wird dann wieder von allen ausgeführt */
	margin-bottom: 60px;
	}

Diese Art, IE-Bugs zu beheben, sollte eigentlich nicht verwendet werden ( … um das Grund-Stylesheet sauber zu halten). Da ich jedoch bisher nicht viele Anpassungen vornehmen mußte, habe ich es auf diese (nicht besonders elegante Weise) gelöst.
Nach Umänderung meines Stylesheets zu einer PHP-CSS-Datei mit Content-Type-Deklaration wurde ich auch sofort bestraft und der Hack funktionierte aus mir unerklärlichen Gründen nicht mehr. Als Folge wurde meine Seite 3 Tage lang etwas “zerissen” im IE angezeigt, bis ich es als Firefox-Nutzer endlich gemerkt hatte. Dadurch wurde ich mal wieder daran erinnert, dass in der Programmierung umfangreiche Tests unabdingbar sind.
Nun hätte ich mein Grund-Stylesheet ändern und die IE-Anweisungen auslagern können. Ich entschied mich aber dafür, den PHP-Teil in eine separate Datei zu schreiben und zusätzlich in die Seite einzufügen. So können zukünftige weitere Schritte überschaubarer realisiert werden.

Ich hoffe, diese Einführung in dynamische Stylesheets war hilfreich für eigene Projekte.

Hier noch mal der gesamte Quellcode

/* ... muss am Anfang eingefügt werden */
/* error_reporting(E_ALL)  und ini_set('display_errors', 'On') zur Fehlersuche */
error_reporting(E_ALL);
ini_set('display_errors', 'On');
header('Content-type: text/css');

/* Zufallshintergrund */
if(!isset($_SESSION['color'])) {

  $farben = array('weiss', 'schwarz', 'blau', 'gruen', 'beige', 'hellblau', 'hellgruen', 'rose', 'sand', 'grau_gruen');
  $zufall = array_rand($farben, 1);/* ... die 1 kann bei einem Wert auch weggelassen werden */
  $zufalls_farbe = $farben[$zufall];

  switch ($zufalls_farbe) {
    case 'weiss':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'beige':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellblau':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'oliv':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'rose':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellgruen':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'sand':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'grau_gruen':
      $_SESSION['textcolor'] = '#222';
        break;
    default:
      $_SESSION['textcolor'] = '#ccc';
        break;
  }
  $_SESSION['color'] = $zufalls_farbe;
}
?>

#header {
	background: transparent url('images/layout/bg_.png') repeat-y top center;
	}

#container_inside {
	background: transparent url('images/layout/bg_.png') repeat-y top center;
	}

#content {
	font-size: 1.35em;
        color:;
	}

CSS Spezial: Gezieltes Ansprechen von HTML-Elementen

Matu — Thu, 21 May 2009 13:33:02 +0000

Wer sich mit Cascading-Stylesheets befasst, sei es beruflich oder privat, definiert die Style-Informationen der grundlegenden Elemente im Allgemeinen in einer externen .css-Datei.

Vor allem Anfänger, die sich erst kurz mit dem Thema befasst haben, erkennen dabei nicht die weiterreichenden Möglichkeiten dieser deklarativen Stylesheet-Sprache, einzelne Elemente oder Bereiche gezielt ansprechen zu können.

Als erste Stufe der Separierung wird hierzu das jeweilige Block-Element (div) mit einer Klasse -oder ID-Deklaration versehen, damit es angeprochen werden kann. Aufbauend auf diesen “Angriffspunkten”, d.h. das gezielte Ansprechen eines zu gestaltenden Bereiches über die zugeordnete Klasse bzw. ID, kann nun auf die einzelnen Elemente innerhalb dieses separierten Bereiches eingewirkt werden, ohne das dies Einfluss auf die restliche Webseite hat.
Beispiel:
Webseiten enthalten üblicherweise Struktur-Bereiche wie container (main, wrapper), header, content, menu, sidebar und footer. Nun definiert man zum Beispiel zunächst die allgemeinen Deklarationen für den a-Tag (hover, visited, focus, active) :

a {
color: #aaa;
text-decoration: none;
}

a:hover{
color: #ccc;
text-decoration: underline;
}

...

Nur bei dem content- sowie sidebar-Bereich soll nun noch ein Zusatz in Form eines nachstehenden Images () durch das :after-Pseudoelement angehängt werden. Die Links im Text-Bereich (content) und im Seiten-Bereich (sidebar) sollen also im Gegensatz zu a-Tags im header, menu oder footer-Bereich zusätzlich kenntlich gemacht werden, was dann so aussehen soll.
Dazu muss im Stylesheet folgendes deklariert werden:

#content, #sidebar a:after {
content:" "url(images/link.png);
}

Der Pfad zum Image muss natürlich angepasst werden.
Dies würde nun allen Links in den Bereichen

 Inhalt mit a-Tags 
 Inhalt mit a-Tags

ein Image anhängen.
Ich gehe davon aus, das bis hier alles bekannt sein sollte. Nun gehen wir aber noch einen Schritt weiter. Was wäre, wenn sich innerhalb dieser beiden Bereiche eine sogenannte “Sprungmarke” befindet. Ein a-Tag, der es ermöglicht, an eine (diese) bestimmte Stelle zu springen:

Dieser ist eigentlich nicht sichtbar, da hier das href-Attribute fehlt (… was durchaus gewollt ist). Durch unsere zusätzliche Style-Zuweisung würde aber auch diesem nun ein (sichtbares) Image angehängt werden, was hier fehl am Platz wäre.
Was tun sprach Zeus

Eine Möglichkeit wäre es, jeden a-Tag, wo das Image gewünscht wird, einer Klasse zuzuordnen:

.image a:after {
content:" "url(images/link.png);
}

Das sieht im Stylesheet sogar noch kürzer aus. Aber nun müßte jedes a-Tag mit dieser Klassen-Definition versehen werden:

Link

Nicht sehr sinnvoll, oder?!
Daher möchte ich auf den Titel dieses Artikels zurück kommen und eine weitere Möglichkeit offerieren, einzelne Elemente direkt anzusprechen.
Dazu gebe ich zunächst ein paar Beispiele:

#content, #sidebar a[href]:after {             //Beispiel 1
content:" "url(images/link.png);
}

#content, #sidebar ul li a[href]:after {       //Beispiel 2
content:" "url(images/link.png);
}

#content, #sidebar ul ul li a[href]:after {    //Beispiel 3
content:" "url(images/link.png);
}

p.textinput input[type="text"]:hover {         //Beispiel 4
background: #EBF4FF;
}
...

Bestimmt kann ich mir weitere Kommentare sparen, dennoch eine kurze Erklärung.
Beispiel 1 würde nur a-Tags innerhalb der Bereiche mit den IDs content und sidebar ansprechen (und ein Image anhängen), die ein href-Attribute enthalten. Den zuvor angesprochene Anker jedoch nicht, da hier dieses Attribute nicht vorhanden ist.
Beispiel 2 würde allen a-Tags innerhalb einer ungeordneten Liste (ul) ein Image anhängen. Bei Beispiel 3 beschränkt sich das wiederrum nur auf Unterlisten einer übergeordneten ul-Liste.
Beispiel 4 würde alle Textfelder innerhalb von p-Tags (Abschnitte) angesprechen, denen die Klasse textinput zugeordnet wurde. So läßt sich zum Beispiel die Hintergrundfarbe ändern, wenn man mit dem Mauszeiger drüberfährt ( … dies könnte man noch auf focus erweitern, interessant bei Formularen …).

So kann gezielt auf jedes Element bzw. auf jedes Element innerhalb eines Bereiches eingewirkt werden.

Teilweise findet man in CSS-Dateien die wildesten Konstrukte, dagegen sind die hier aufgeführten Beispiele noch einfach gehalten.
Ich habe schon Seiten gesehen, wo Experten in Sachen CSS Bildanimationen erstellt haben, die normalerweise mit Javascript realisiert werden (z.B. Lupeneffekt). Leider finde ich den Link nicht mehr, werde ihn aber nach Möglichkeit nachreichen.

Wenn man sich erst einmal damit beschäftigt hat, erweitert es den eigenen Horizont in Bezug auf die Gestaltung von Webseiten ungemein.

Ich hoffe, dieses Spezial war für den einen oder anderen hilfreich und informativ.

CSS Blitztutorial

Matu — Wed, 20 May 2009 15:15:11 +0000

Cascading Style Sheets (CSS) haben die Aufgabe, die HTML-Seite bzw. die HTML-Elemente zum einen zu gestalten und zum anderen zu strukturieren.

Hierbei gibt es mehrere Möglichkeiten, Style-Informationen in eine HTML-Datei einzubringen.

1. Per direktem Inline-Style (Style-Definition befindet sich DIREKT am HTML-Element):

BEISPIEL

style="background-color: #ff0000; color: #0000ff;">

2. Per Style im head-Tag der Seite:
Beispiel





...

...


...
3. Per externer Datei (Dateiname zum Beispiel »style.css«):
BEISPIEL
  table {
	background-color: #ff0000;
	color: #0000ff;
	width: 80%;
	border: 1px 5px 10px 20px solid #00ff00;
  }

  h1, h2, h3, h4 {
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #000000;
  }
  usw.
  

 Die Datei »style.css« wird dabei an einer Stelle abgespeichert, die mit ihrem Pfad im -Tag der HTML-Datei eingetragen wird:
BEISPIEL

  
    
    </span><span>
    

	...

 So können die Style-Definitionen zur Laufzeit Ihrer HTML-Seite automatisch in das Rendern (Berechnung der Darstellung) mit einbezogen werden.

Merke: Die dritte (externe) Variante stellt die gebräuliche Methode dar. Denn sollte mal etwas geändert werden müssen, so muss lediglich die externe CSS-Datei bearbeitet werden und nicht jede einzelne HTML-Seite.
 Man kann so für jedwedes HTML-Tag eine eigene Style-Information hinterlegen. Der Nachteil dabei ist, dass, wenn man beispielsweise den Tag 

  










 mit Styles belegt, jede Tabelle auf der HTML-Seite so dargestellt wird, wie der Style dies vorgibt. So würde eine Übersichtstabelle über Telefonnummern genau so aussehen wie eine, die Kochrezepte darstellen soll.


 Um dies zu verhindern und einzelne HTML-Objekte eben einzeln ansprechen zu können, hat man ein System integriert, das per
Klassenangabe (class=…) das jeweilige Element genau spezifiziert. Im Grunde wird dabei einem HTML-Element eine Art Name

 vergeben, über den es angesprochen wird:
BEISPIEL	
  


 

 ...

Im Stylesheet (»style.css«) wird dann definiert, wie diese Klasse gestaltet werden soll.
Da es sich um eine Klasse handelt, muss dies auch im Stylesheet berücksichtigt werden. Schließlich ist “irgendeinwort” ja kein HTML-Tag.

Klassendefinitionen werden im Stylesheet mit einem Punkt (.) begonnen und direkt danach wird der Begriff notiert, den man
im Klassenaufruf in der HTML-Datei benutzt hat:

BEISPIEL

(Stylesheet)
...

.irgendeinwort {
	background-color: #ff0000;
	color: #0000ff;
}

...

Mit dieser Klassendefinition ist es nun möglich, JEDEM HTML-Element, dem diese Klasse zugeordnet wird, genau diese Gestaltung zu geben. Mit anderen Worten: wenn Sie in Ihrem HTML-Code eine Headline

mit der Klasse “irgendeinwort” belegen,

BEISPIEL

...

dann wird (auch) diese Headline mit rotem Hintergrund hinterlegt, sowie der Text mit blauer Farbe dargestellt. Dies gilt für (fast) alle anderen HTML-Elemente auch. Probieren Sie dies bitte aus.

Analog zu den Klassen können auch IDs benutzt werden:

Aufruf HTML:

...

Defininition CSS:

#andereswort {...}

Wie man sehen kann, beginnen ID-Definitionen im Stylesheet im Gegensatz zum Punkt der Klasse mit einer Raute (#).
IDs sind dominanter als Klassen und überschreiben diese.
Merke: Eine ID darf (pro Begriff) im Gegensatz zu einer Klasse nur EINMAL innerhalb einer HTML-Seite vorkommen!

Es lassen sich natürlich nicht nur Farben und Schrifttypen definieren.

Ein besonders wichtiges Gestaltungswerkzeug sind die Ränder und Abstände, die unsere HTML-Elemente umgeben und die da heißen:

  margin   →  Außenabstand um ein Element herum
  padding  →  Innenabstand innerhalb eines Elementes
  border   →  Rand um ein Element herum

Die Gesamtbreite eines Objektes ergibt sich damit durch folgende Formel:

margin + border + padding + width + padding + border + margin
------   ------   -------           -------   ------   ------
                        |           |
             |          +-----------+          |
    |        +---------------------------------+         |
    +----------------------------------------------------+

BEISPIEL

(Stylesheet)
...

.irgendeinwort {
	background-color: #ff0000;
	color: #0000ff;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ff3366;
}

...

Folgende Schreibweisen sind dabei möglich:

margin [padding] [border]: 10px;
→ rund um das Objekt 10 Pixel

margin [padding] [border]: 10px 20px;
→ 10 Pixel oben und unten, 20 Pixel rechts und links

margin [padding] [border]: 10px 20px 5px;
→ 10 Pixel oben, 20 Pixel rechts und 20 Pixel links, 5 Pixel unten

margin [padding] [border]: 10px 20px 5px 1px;
→ 10 Pixel oben, 20 Pixel rechts, 5 Pixel unten, 1 Pixel links

Läuft also im Uhrzeigersinn und beginnt oben.

Als abschließende Information sollte man die unten aufgeführten Tags von vorne herein mit Definitionen versehen:

body {
	schriftfamilie;
	schriftgröße;
	zeilenabstand;
	farbe;
	hintergrundfarbe;
	außenabstand;
	innenabstand;
}

p {
	farbe;
	einzug;
	zeilenabstand;
}

h1, h2, h3, h4, h5, h6 {
	farbe;
	auszeichnung;
	border?;
	hintergrundfarbe?;
}

a {
	farbe;
	text-decoration;
	größe;
}

a:hover {
	farbe;
	fett?;
}

a:visited {
	.....
}

a:focus {
	.....
}

Damit haben Sie erst einmal die grundsätzlichen Elemente einer HTML-Datei optisch definiert.
Wer jetzt “Blut geleckt” hat, kann tiefer greifende Informationen über Cascading Stylesheets unter css4you, selfhtml.org, peterkropff … nachgelesen.