Tip: PHP gebruiken in CSS en of JavaScript.

[ErikBooy007]

Ik zal je eerst even kort uitleggen waarom ik deze tip schrijf. Het is namelijk zo dat aan een project werk waarin ik een probleem tegenkwam. Nu rijzen bij jou natuurlijk de vragen "welk project?" en "welk probleem?". Dat zal ik je ook nog even vertellen voor we bij het echte werk aankomen.

Het project:
Je kunt het zien als een soort online desktop (vergelijkbaar met, maar kwalitatief ver ondergeschikt aan "eyeOS"). Het is niet zo dat ik daadwerkelijk een online desktop wil maken of wil concurreren met eyeOS, maar het is puur een gelegenheid voor mezelf om eens te experimenteren met technieken die ik anders nooit gebruik. Het is (nu nog) te vinden op www.erikbooy.nl/EBOS (EBOS staat voor Erik Booij Operating System, niet erg creatief. Weet ik.).

Het probleem:
Ik wilde een klok weergeven (digitale notitie) die de indruk gaf van een digitale wekker (segment LCD). Ik wilde niet alleen statisch de nummers weergeven, maar ook het volgende nummer binnen laten schuiven. Daarom zette ik alle nummers in 1 afbeelding, boven elkaar. Door de afbeelding absoluut te positioneren en de overflow van de parent op hidden te zetten, kon ik dan met die ene afbeelding toch 10 verschillende cijfers weergeven door slechts de "top" property van de afbeelding aan te passen. Nu wilde ik echter de startpositie (dus afhankelijk van de tijd) ook al vastleggen in de CSS. Daar dacht ik dus mooi PHP voor de kunnen gebruiken. Ik kwam erachter dat mits je de juiste header ( 'Content-type: text/css' ) meestuurt, je best een PHP-bestand als stylesheet kunt gebruiken. En dat schept mogelijkheden.

Voorbeeldje (dit is een stuk van de code die ik daadwerkelijk gebruikt heb):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
    header('Content-type: text/css'); // Stuur de juiste header om de browser duidelijk te maken, dat het écht om een CSS file gaat
?>
 
<?php
 
    $hours = date('G'); // stop de uren (met "leading zero's") van de huidige tijd in een variabele
    $minutes = date('i'); // doe hetzelfde met de minuten
    
    $offset = array ( "-207", "-184", "-161", "-138", "-115", "-92", "-69", "-46", "-23", "-0" ); // creëer een array met de offset voor elk getal (voor een 0 is de top property van de afbeelding -207px, elk cijfer is 23px hoog)
 
?>
 
div.timedisplay{ /* de elk cijfer heeft z'n eigen "vakje" met class "timedisplay" */
    float: left;
    width: 16px;
    height: 23px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
 
/* hieronder wordt voor elk getal automatisch de initiële offset aangegeven, dit is een mooi voorbeeld van het feit dat je gewoon PHP code in je CSS kunt stoppen */
 
div.timedisplay.time1 img{
    position: absolute;
    top: <?php echo $offset[ $hours{0} ]; ?>px;
}
 
div.timedisplay.time2 img{
    position: absolute;
    top: <?php echo $offset[ $hours{1} ]; ?>px;
}
 
div.timedisplay.time3 img{
    position: absolute;
    top: <?php echo $offset[ $minutes{0} ]; ?>px;
}
 
div.timedisplay.time4 img{
    position: absolute;
    top: <?php echo $offset[ $minutes{1} ]; ?>px;
}

Voor zover mijn specifieke geval. Maar er zijn meer mogelijkheden. Wat dacht je bijvoorbeeld van "gebruiker-specifieke-stylesheets". Oké dat woord heb ik net bedacht, dus ik kan me voorstellen als je niet weet wat het is. Je zou op deze manier een gebruiker in staat kunnen stellen om zelf de achtergrondkleur van z'n pagina te bepalen. Of het lettertype van alle kopjes.

Voorbeeld:

1
2
3
4
5
6
7
8
9
body {
  background: <?php echo $_COOKIE[ 'user_preferred_background' ]; ?>;
}
 
/* en */
 
h6, h5, h4, h3, h2, h1 {
  font-family: '<?php echo $_COOKIE[ 'user_preferred_font' ]; ?>', sans-serif;
}

Nu kun je dit natuurlijk ook gewoon met behulp van inline-styles doen, met andere woorden, de waarden gewoon ín de opgevraagde pagina echoën. Like so:

1
<h2 style="font-family: '<?php echo $_COOKIE[ 'user_preferred_font' ]; ?>', sans-serif">Dit is een kopje</h2>

of de bovenstaande CSS code eenvoudigweg als stijlblok in de echoën. Maar mijn doel was om alle CSS en JS uit de bron van m'n daadwerkelijke pagina te houden. Dus geen obtrusive-JavaScript en ook geen obtrusive-CSS (geen idee of die term bestaat, maar je snapt wel wat ik bedoel).

Nou is dit voor sommigen van jullie misschien al lang bekend, maar voor mij was dit een behoorlijke openbaring . Eerder zat ik toch veelal moeilijk te doen met omslachtige oplossingen, terwijl het nooit echt bij me opkwam om het eens op deze manier te proberen. Dus deze kennis wilde ik graag even met jullie delen.

[That Guy]

Ah, nette tip. Een opmerking echter: (ik neem aan dat Erik dit zelf wel wist) als je direct cookies in je code stopt, en een user heeft deze cookie niet, heb je een probleem, want de cookie bestaat niet, maar je echoed hem wel direct uit in je html. Een nette oplossing hiervoor is (vind ik) om ergens een variabele genaamd 'settings' te maken, en deze te vullen met danwel het cookie (als ie bestaat) en anders de default waarde. Daarna kan je gerust de 'settings' variabele in je code echoen.