Variabler i CSS

CSS (Cascading Style Sheets) blev i sin tid introduceret af W3C for at forbedre tilgængelighed på webben, ligesom det skulle være med til at gøre HTML mere semantisk, ved at separerer styling fra resten af HTML-koden.
I "moderne" web-design/-programmering, kommer man ikke udenom brugen af CSS - tilføj dertil et sprog til dynamisk generering af indhold og du kan komme rigtig langt. Men CSS har en mangel - variabler!

Som det er nu kan du ikke benytte variabler i CSS, hvilket efter min mening virker til at være et kæmpe hængeparti. CSS findes idag i sin 2. revision, med en 3. på tegnebordet, og med tidens trends og tendenser, som f.eks. table-less designs, kunne det virke naturligt at introducerer variabler ifm. styling, men synes det ikke at være tilfældet, hvis man læse følgende skrivelse om CSS3 Under Construction.

En Simon Willison er sågar kommet med et løsningsforslag til hvordan man, rent syntax-mæssigt, kunne få dette variabel-ønsket ind i CSS, og det virker faktisk meget fornuftigt - læs mere her.

Heldigvis findes der en løsning. Den jeg har fundet frem til, og benyttet, er i forbindelse med PHP.

Variabler i CSS vha. PHP:

<?php
    header("Content-type: text/css");
    $bgCol = "#BDE469";

    echo <<<EOD

    body {
        background-color: $bgCol;
    }

    EOD;
?>

Ovenstående skal selvfølgelig skrives i en .php-fil, men kan inkluderes i din <head>-sektion som en almindelig .css-fil.

Uden selv at have prøvet det, postulerer denne side, at have en løsning for brugen af variabler i CSS i forbindelse med ASP.net.

css php

Når man nu alligevel har sin CSS i en PHP fil, kan man også lige gå skridtet videre og enable kompression så det fylder 90% mindre :)

Starten af mit stylesheet ser således ud:

if (strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
	ob_start("ob_gzhandler");
}
header("content-type: text/css; charset=iso-8859-1");

Jeg ved at Firefox henter stylesheetet hver gang, ingen caching, så det er jo rart at kompresse det.

Julian

Hmmm - det kunne der være noget om, men her kommer spørgsmålet så.

Jeg starter faktisk allerede med at komprimere, når en hvilket som helst side bliver genereret, men jeg har aldrig tænkt over, om dette også vil tage mit "PHP-extended" stylesheet med?

Simon Jensen

Webprogrammør

Simon Jensen

Bloggen med evigt skiftende tema!

Variabler i CSS

Skriv en kommentar