05. CSS

Dynamisk css med php

2011-02-07 08:44 #0 av: johan-ahlback

Med dynamisk css menar jag på samma sätt som php gör en html sida dynamisk. Innehållet ändras beroende på vad man begär. Till skillnad från vanlig html som är statisk. Och man kan faktiskt göra css dynamisk med php och jag ska berätta hur.

Först behöver man skapa sin css fil men istället för att döpa den till fil.css ska man döpa den till fil.css.php. Anledningen till att man har kvar css i filen är för att man lätt ska se att det är en css fil.

Men eftersom filen har ändelsen php kommer servern att skicka den som ett php dokument. Därför kommer inte webbläsaren läsa det som css. För att fixa det måste vi ändra en sak som heter http header.

http Header

Header är inte som när du använder head i ett html dokument. För att ta reda på vad en http header är så måste vi kolla på hur webbläsaren hämtar en sida från servern.

När du öppnar en webbsida i en webbläsare skickar du en begäran till en server som berättar vilken sida du vill se. När servern får den så letar den reda på filen och kollar vilken sorts fil det är. När den har kollat allt och kört alla skript som ska köras på servern å ska den skicka sidan till webbläsaren. Men för tt webbläsaren ska veta hur den ska läsa filen måste den få information om den. Och det är i http header den får all sådan information.

Den informationen vi måste se till att ändra är content-type vilket du kanske känner igen om du använt xhtml. Och attributet type är nästan samma sak. För att ändra header så att den säger att det är css kan vi använda php funktionen header.

Så högst upp skapar vi en php tagg med funkti'nen header. Vi skickar med en sträng som är 'content-type: text/css':

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

då kommer phpfilen säga till webbläsaren att den egentligen är en css fil och webbläsaren kommer att läsa den som en sådan.

Hur ska man göra css filen dynamisk?

Jag vill att man ska kunna välja mellan två olika stilmallar, en blå och en röd. Och eftersom det är php kan vi använda oss av variabler, arrayer och alla andra saker man kan använda sig av i php. Färgerna kommer jag spara i en varsin array och sen kommmer jag testa vilken som ska användas med en if sats.

If satsen

med if satsen ska vi kolla om vi ska ha den vanliga stilnallen eller om vi ska använda andra färger. Och det ska vi testa med get som är en array som innehåller text som syns i adressfältet. Du har säkert sätt det här eller liknande: www.minblogg.se/?page_id=2. Det som står efter frågetecknet är det som kommer att sparas i get arrayern. För att andra färg kommer jag använda color som namn och blue som värde för att ändra färger. Så if satsen kommer att se ut så här:

if ($_GET['color'] === 'blue'){
}else{
}

så om get color har exakt värde 'blue' så kommer färgerna att vara blåa istället för röda. För att bestämma färgerna sparar vi dem i en array

Spara färger i array.
Anledningen till att jag sparar färgerna i en array är för att det är enklare att ändra och lägga till färger. För att skapa en array med färger kriver man såhär:

$colors = Array(
'main' => '#f00',
'widgets' => '#600',
'borders' => '#000')

notera att jag anger vad färgerna ska vara till istället för namnen på färgerna det är för att vi kommer att använda samma array till båda versionerna. För den blåa blir det istället:

$colors = Array(
'main' => '#00f',
'widgets' => '#006',
'borders' => '#000')

om vi lägger till det där i vår if sats får vi:

if ($_GET['color'] === 'blue'){
$colors = Array(
'main' => '#00f',
'widgets' => '#006',
'borders' => '#000')
}else{
$colors = Array(
'main' => '#f00',
'widgets' => '#600',
'borders' => '#000')
}

Nu kommer färgerna att vara röda eller blåa beroende på värdet på $_GET['color'].

Använda arrayerna.

Nu kan man börja lägga till färgerna där de ska vara i stilmallen. Det gör man genom att använda vanlig css och php taggar:

body{
background-color: <?php echo $colors['main']; ?>;
}

.widget{
background-color: <?php echo $colors['widgets']; ?>;
border:2px solid <?php echo $colors['borders']; ?>;
}

Som du ser så använder vi värdet av arrayen för att lägga till färgen. Så om vi väljer blå istället för röd ändras det överallt man använder den.

Låta användaren välja.

Nu kommer vi till det momentet där användaren får välja. Låt oss säga att vi har en function som låter användaren välja och sparar den informationen i en kaka (cookie). Då kan vi skriva så här för att länka in vår stilmall(php!):

<?php if($_COOKIE['csscolor'] === 'blue'){ ?>
<link rel="stylesheet" src="style/basic.css.php?color=blue">
<?php }else{ ?>
<link rel="stylesheet" src="style/basic.css.php">
<?php } ?>

nu kan man byta stilmall utan att använda javascript.

Fördelar och nackdelar

jag kan inte ge några bra fördelar och nackdelar för jag har inte testat det i stor skala än. Men jag gillar att jag kan arbeta med variabler och arrayer för färger och annat. En nackdel kanske är att det kan ta längre tid att ladda sidan.

Man hör inte talas om det här så ofta och jag vet inte varför. Att kunna använda variabler i css har länge efterfrågats av designers. Kanske finns det en bra anledning till att det inte används eller så tänker inte designers på att php kan hjälpa dem.

Finns det allternativ?

Klart det finns. Javascript kan göra så att man kan byta stilmall men man kan inte använda variabler. Men LESS till räddning. LESS är ett bibliotek som körs på både serversidan och i webbläsaren.

http://lesscss.org/

Vill du ha en artikel om LESS? Skriv det i kommentaren.

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2011-02-08 13:19 #1 av: johan-ahlback

Såg nu att google använder den här tekniken för deras font tjänst. Så att använda den är nog inga problem.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.