De opmerkzamere leden onder ons hebben afgelopen 1 april (sommigen al 3 minuten na het begin!) opgemerkt dat onze homepagina plots achterstevoren vertoond werd. Het leuke is dat de hele pagina nog precies hetzelfde werkte, alleen zat alles links wat voorheen rechts was en vice versa. Het is nog verrassend eenvoudig om dit voor elkaar te krijgen ook!
Om deze grap uit te voeren hebben we twee kleine dingetjes moeten toevoegen aan de webpagina’s. Als je niet precies weet wat er gebeurt, hoef je je geen zorgen te maken. Het is gewoon om een indruk te geven wat je allemaal met een webpagina aankan. Dit stukje code voeren wij uit als je een pagina opvraagt, nog voordat we hem naar je opsturen.
if(date('d-m') == '01-04' && substr($uriRef['request'], 0, 5) == '/Home') {
echo '<link rel="stylesheet" href="'.$this->scriptFileTime('/Layout/CSS/1april.css').'" type="text/css" media="screen">'."\r\n";
}
Ten eerste controleren we of het daadwerkelijk 1 april is. Zo konden we de spiegeling van tevoren installeren en gebeurde het automatisch op de dag zelf. De website is toch wat minder bruikbaar dus we hadden later op de dag ingesteld dat alleen de homepagina gespiegeld werd. Dit doet de code door te kijken of de opgevraagde pagina begint met ‘/Home’. Alleen als allebei de eisen waar zijn, voeren we de grap echt uit. Om dat te doen, voegen we een stukje toe aan de pagina, waarin staat dat de opmaak (stylesheet) van 1april.css uitgevoerd moet worden:
body {
-moz-transform: scaleX(-1) !important;
-o-transform: scaleX(-1) !important;
-webkit-transform: scaleX(-1) !important;
transform: scaleX(-1) !important;
}
In het bestand 1april.css vertellen we wat er precies moet gebeuren: we passen een transformatie toe waarbij we in de hele inhoud (body) de x-coordinaat met -1 vermenigvuldigen, oftewel een spiegeling. Verder zorgt !important er nog voor dat deze regel belangrijker is dan andere transformatieregels, zodat je vrijwel zeker daadwerkelijk de spiegeling zult zien.
Helaas is de wereld niet perfect. We moeten we de regel een aantal keer met kleine variates herhalen voor het geval dat het niet duidelijk is. We willen natuurlijk niet dat iemand onze geweldige grap kan missen. Alle populaire browsers ondersteunen net weer een andere editie van de nieuwere en geavanceerdere opmaak, zoals bijvoorbeeld transformaties (dat is geen wonder, als je precies wilt doen zoals het hoort, ben je ook een tijdje bezig). Gecko (de drijvende kracht achter Mozilla Firefox) verwacht dat je voor dergelijke fancy dingetjes altijd -moz- zegt, Opera eist een -o- en WebKit (waar bijvoorbeeld Google Chrome en Safari op gebaseerd zijn) wil juist weer -webkit-. Later bleek dat we voor Internet Explorer compleet vergeten waren om -ms-transform toe te voegen. Gelukkig worden na verloop van tijd steeds meer dingen gewoon standaard geaccepteerd, en kun je steeds meer van die voorvoegsels weglaten.
Doe-Tip: als je zelf wilt spelen met transformaties en rotaties, kun je in de betere browsers dit heel eenvoudig doen, zonder eerst een hele website te hoeven bouwen. Rechtsklik op wat je wil spiegelen en kies ‘Inspect Element’. Rechts zie je een heleboel opmaakregels, en die kun je zelf bewerken. Voeg een regel met transform: scaleX(-1); toe en bewonder de resultaten. Probeer ook eens andere transformaties zoals die uit dit lijstje.
Ben je na deze uitleg benieuwd geworden naar websites of heb je altijd zelf al een site willen maken? De WebCie geeft een reeks websitecursussen op 8, 15 en 22 april in BBL 109. Voor informatie kun je gaan naar de site van de WebCie.
