Doe het met stijl
Om je webpagina’s helemaal naar wens op te maken kan je niet zonder css, ook niet wanneer je een cms als Joomla of een blogtool als WordPress gebruikt. De definitieve specificatie van css3 is weliswaar nog lang niet af, maar je kunt er nu al mee aan de slag!
Css staat voor cascading style sheets, een specificatie om de vormgeving van webpagina’s los te koppelen van de eigenlijke inhoud. Je kunt css-informatie in de webpagina zelf opnemen, zowel inline, dus in de pagina zelf, als in de <head>-sectie. Voor de overzichtelijkheid kun je het ook onderbrengen in een apart bestand (extern stijlblad) waarnaar je dan vanuit je webpagina verwijst. Omdat zo’n constructie tot potentiële conflicten kan leiden, volgt de css-informatie een watervalsysteem - vandaar de naam ‘cascading’. Een inline opmaakdeclaratie krijgt een hogere prioriteit dan de opmaak die vanuit de <head>-sectie is bepaald en die krijgt op zijn beurt voorrang op een eventueel extern stijlblad.
De eerste css-editie (css1) stamt al uit 1996 en werd twee jaar later opgevolgd door css2. Zo goed als alle moderne browsers ondersteunen nagenoeg volledig beide specificaties. Intussen is men ook al jaren bezig met css3, maar het zal – net als bij html5 – nog lang duren eer de standaard het stadium van een definitieve W3C-aanbeveling bereikt. Dat css(3) nog volop in beweging is, valt goed af te leiden uit een webpagina als www.w3.org/style/css/current-work.
Gelukkig hoef je die eindfase niet af te wachten en kan je nu al aan de slag met css3. Alle moderne browsers ondersteunen namelijk al in mindere of meerdere mate css3. Op www.findmebyip.com/litmus bijvoorbeeld lees je in tabelvorm af hoe goed elke browser op dat vlak presteert. Het zal je opvallen dat vooral Internet Explorer achterloopt, vooral als het op ondersteuning van css-eigenschappen aankomt. Wel is het zo dat Internet Explorer vanaf versie 9 met zowat alle css3-selectors overweg kan: dat bewijst ook de test op www.css3.info/selectors-test.
Her en der op internet vind je al enkele mooie demonstraties van css3 (bijvoorbeeld op www.css3.info/preview of enkele voorzichtige praktijkpogingen op www.css3gallery.net). maar nog veel leuker is het als je er zelf mee experimenteert. In dit artikel bekijken we alvast enkele css3-handigheden.
Selectors
Selectors mogen dan niet het meest sexy onderdeel uit de css-specificatie zijn, ze zijn wel van cruciaal belang. Een css-selector is een item waarop je een bepaalde css-opmaak kunt toepassen. Een eenvoudig voorbeeld met de syntax selector { eigenschap:waarde; } verduidelijkt dit: h2 { font-family: ‘Comic Sans MS’; color: green; }. Alle h2-items worden hierdoor in Comic Sans MS weergegeven als groene tekst. De selectors waren aanvankelijk vooral klassieke html-elementen (zoals h2, p, en dergelijke), waarbij de css-declaratie op elke instantie van dat element werd toegepast. Css3 breidt de selectors flink uit – uiteraard met een wat complexere syntax tot gevolg.
We volstaan hier met een tweetal voorbeelden die je alvast een idee geven. Het eerste stuk code voeg je toe aan de header van het document (tussen <head> en </head>). Het tweede stuk plaats je in de body. In het volgende voorbeeld laten ze zien hoe alle <p>-elementen waarbij “PCM” in de titel voorkomt – en alleen die – een speciale opmaak meekrijgen.
<style type="text/css" >
p[title*="PCM"] { font-family: 'Comic Sans MS'; color: blue; }
</style>
<p>Welkom op de CSS3-pagina van...</p>
<p title="Mijn PCM">PCM, Personal Computer Magazine</p>
Handig zijn verder ook de (pseudoclass-)selectors :checked, :enabled en :disabled, bedoeld om formuliervelden extra focus te geven:
:checked {display: inline-block; width: 6em;}
<form>
<input type="checkbox" /></p>
<input type="radio" name="pcm" /></p>
<input type="radio" name="pcm" />
</form>
Je zal merken dat het selectievakje en de keuzeknoppen meer ruimte innemen – wegens width:6em - zodra je ze hebt aangeklikt.
Randen en kaders
Ook voor het werken met kaders en randen voorziet css3 in enkele creatieve extra’s. Om een kader afgeronde hoeken te geven kan één css-declaratie volstaan:
.hoeken { border: 8px outset red; width: 400px; height: 100px; border-radius: 10px; }
<div class="hoeken">Een kader met afgeronde hoeken</div>
Overigens hoef je niet noodzakelijk alle hoeken af te ronden. Het beperken tot één of meerdere hoeken doe je met behulp van de eigenschappen border-top-left-radius, border-bottom-right-radius, enzovoort. Nog meer afronding is natuurlijk ook mogelijk, zodat je bijvoorbeeld een perfecte cirkel krijgt:
.cirkel { background: red; color: yellow; width: 100px; height: 100px; text-align: center; border-radius: 50px; display: box; box-orient: horizontal; box-pack: center; box-align: center;}
<div class="cirkel">Cirkel met tekst</div>
Zonder de vetgedrukte items krijg je weliswaar een cirkelvorm, maar staat de tekst niet mooi in (het midden van) de cirkel. Om dat gedaan te krijgen maak je dus gebruik van een nieuw “box-model”, dat vastlegt hoe zo’n box in een ander box geplaatst moet worden. Lang niet alle browsers ondersteunen momenteel deze eigenschap, maar als het goed is lukt je dat met behulp van een browser-specifieke prefix alsnog. Voor browsers die worden aangestuurd door de Gecko-engine (voornamelijk Mozilla Firefox) is dat de prefix –moz- en voor browsers met de WebKit-engine (Safari en Chrome) is dat –webkit-. De declaratie ziet er voor dit laatste browsertype dan als volgt uit:
.cirkel { background: red; color: yellow; width: 100px; height: 100px; text-align: center; border-radius: 50px; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; }
Overigens hoeft niets je te weerhouden de drie types eigenschappen broederlijk naast elkaar te declareren (display: box; display: -webkit-box; display: -moz-box;).
Ook leuk is de mogelijkheid om twee of meer verschillende afbeeldingen als kaderachtergrond te gebruiken. Je hoeft eigenlijk alleen een komma te zetten tussen de diverse plaatjes. Houd er wel rekening mee dat niet alle browsers hiermee al overweg kunnen. Sommige gaan zelfs compleet voorbij aan de declaratie met als gevolg een lege achtergrond. In onze code hebben we dat alvast opgevangen (zie vetgedrukte tekst):
.kader { width: 500px; height: 100px; background: url(pcm.gif) no-repeat; background: url(pcm.gif) no-repeat, url(hub.gif) repeat; background-position: bottom right, 50% 30; }
<div class="kader"></div>
De waarden die bij de eigenschap background-position horen bepalen waar (en hoe) de afbeelding precies getoond wordt binnen het kader. De syntax hiervan is behoorlijk complex. Je vindt alle nodige details, inclusief voorbeelden, op www.w3.org/tr/css3-background/#background-position.
Tekst en webfonts
Aan saaie teksten kan css3 weinig verhelpen, maar de specificatie kan er in elk geval wel voor zorgen dat de tekst er leuk uitziet. Een leuke toevoeging is bijvoorbeeld text-shadow. Deze eigenschap doet precies wat de naam suggereert:
h1 { text-shadow: 2px 3px 5px red }
<h1>PCM, Personal Computer Magazine</h1>
De eerste twee waarden bepalen de verschuiving van de schaduw ten opzichte van de eigenlijke tekst (horizontaal en verticaal). De derde waarde legt de vervagingsradius van de schaduw vast en red geeft uiteraard de kleur aan. Het is trouwens ook mogelijk meer dan één schaduweffect op tekst toe te passen, bijvoorbeeld:
h1 {text-shadow: 2px 3px 5px red, -2px -3px 2px yellow}.
Het aantal webpagina’s dat volop inzet op schreefloze fonts (sans serif) als Verdana valt niet te tellen. Toegegeven, dergelijke fonts laten zich lekker lezen op een scherm, maar je kunt ook wat creatiever uit de hoek komen: met webfonts bijvoorbeeld. Dat zijn lettertypes die door de browser automatisch kunnen worden gedownload. Webfonts zijn geen uitvinding van css3, maar de specificatie heeft het concept wel nieuw leven ingeblazen. Je kunt in css3 namelijk ieder (open) truetype font (extensies .ttf en .otf) inzetten.
@font-face { font-family: Inkinthemeat; src: url("inkinthemeat.otf") }
h1 { font-family: Inkinthemeat, Verdana; color: blue; font-size: 6em; }
<h1> PCM, Personal Computer Magazine</h1>
Je hoeft niet ver te zoeken gratis fonts die je effectief als webfonts kunt en mag inzetten. Een bezoekje aan een site als www.dafont.com. Handig is ook www.google.com/webfonts. Eigenlijk is deze pagina bedoeld om webfonts via een Google api op je webpagina’s te gebruiken. Je kunt de fonts echter ook probleemloos in .ttf-formaat downloaden, naar je eigen site uploaden en alsnog via css3 in je webpagina’s opnemen. Je hoeft het gewenste font alleen te downloaden en ergens online bereikbaar te maken. Je kunt het bijvoorbeeld op dezelfde locatie als je webpagina plaatsen.
Toch nog een kanttekening: Internet Explorer ondersteunt weliswaar css-webfonts, maar jammer genoeg alleen in het .eot-formaat (Embedded OpenType). Dat hoeft geen onoverkomelijk probleem te zijn. Op www.cuvou.com/wizards/ttf2eot.cgi vind je een gratis online converter evenals de nodige html-code om het font zowel in Internet Explorer als in andere browsers correct weer te geven.
Kleur en animatie
Css3 heeft ook het kleurenpalet verder uitgebreid. Nieuw zijn onder meer de kleurenschema’s hsla en rgba, waarbij de a voor ‘alpha channel ’ (alfakanaal) staat. Meer achtergrondinformatie vind je op www.w3.org/tr/css3-color. Hiermee is het mogelijk de transparantiegraad van tekst of andere objecten nauwkeurig te bepalen. Dat kan ook met de eigenschap ‘opacity’, bijvoorbeeld als volgt: <div style=”background: rgb (255, 100, 50); opacity: 0.25;”>Deze tekst is bijna volledig transparant</div>. Met hsla/rgba-kleurenschema’s wordt het echter nog iets eenvoudiger:
<div style="background: hsla(0,100%,50%,0.7);">beetje transparant!</div>
<div style="background: rgba(255,100,50,0.2);">bijna volledig transparant!</div>
Over de precieze verschillen tussen opacity en rgba lees je meer op www.css3.info/introduction-opacity-rgba. Ook hier blijft Internet Explorer weer flink achter. Met het browserspecifieke filter kan je het als volgt oplossen: <p style="background-color: green; color: white; width:100%; filter:alpha(opacity=20) ;">Deze alinea is bijna geheel doorzichtig!</p>.
Css3 maakt ook erg fraaie animaties mogelijk, al dan niet in combinatie met JavaScript. Sites als www.1stwebdesigner.com/css/50-awesome-css3-animations en http://blog.insicdesigns.com/2010/02/the-beauty-of-css3-animation hebben alvast een aantal overtuigende demo’s verzameld. We beperken ons hier noodzakelijkerwijs tot een instapvoorbeeld aan de hand van de eigenschap ‘animation’, die verschillende animatie-eigenschappen verenigt. Eerst bepaal je het gewenste keyframe (zie regel 1), waarna je de eigenlijke animatie vastlegt (regel 2) en die uiteindelijk ook aanroept:
@-webkit-keyframes mijn_animatie {from {left: 50 px; top: 50 px;} to {left: 400 px; top: 200 px;}}
#kader {-webkit-animation: mijn_animatie 4s linear 1 infinite alternate;position:absolute; height: 30px; width:122px; background-color: red;}
<div id="kader">PCM in beweging…</div>
Zoals je merkt, is de animatie-eigenschap momenteel nog browserspecifiek (-webkit-animation) en krijg je die voorlopig alleen aan de praat op browsers met de Webkit-engine. De parameters van de tweede regel, waarin de animatie vastleggen, vergen enige toelichting. Je treft daar de volgende eigenschappen aan:
-animation-name: de naam van je animatie, zoals bepaald door @-webkit-keyframes;
-animation-duration: de duur van een enkele animatie (standaard is dat 0, dus géén animatie – in ons voorbeeld staat die op 4s ingesteld);
-animation-timing-function: bepaalt hoe de animatie tussen twee keyframes moet bewegen (mogelijke waarden zijn onder meer ease, linear, ease-in en ease-out);
-animation-delay: de startvertraging;
-animation-iteration-count: herhalingsfactor (dat kan een cijfer zijn maar bijvoorbeeld ook infinite);
-animation-direction: richting (normal of alternate – in dit laatste geval wordt de animatie ook afgespeeld in omgekeerde richting).
We hebben in deze workshop niet alle mogelijkheden van css3 kunnen bespreken, maar de voorbeelden geven een aardig idee van wat je met css3 kunt. Zoals gezegd is de specificatie nog volop in beweging en valt het niet helemaal uit te sluiten dat bepaalde eigenschappen alsnog verdwijnen of worden aangepast. Anderzijds komen er ook geregeld nieuwe elementen bij en staan er nog wel een aantal op stapel (onder meer voor wiskundige formules en het weergeven van grafieken). Dit alles hoeft je niet te weerhouden css3 in je eigen webpagina’s te gebruiken, zolang je je bewust bent dat niet alle browsers alle css3-eigenschappen (even goed) weergeven.
