1 Inleiding. 1.1 In dit hoofdstuk. 1.2 Het web en opmaak

Transcriptie

1 1 Inleiding Niemand neemt nog genoegen met saaie webpagina s. Afbeeldingen, kleuren, mooie typografie en animaties, het hoort er allemaal bij. De webtaal 1 HTML is nooit voor dat doel ontwikkeld, maar onder druk van de gebruikers is HTML uitgebreid met opmaakmogelijkheden. Daardoor lopen vorm en inhoud vaak volledig door elkaar en dat heeft de nodige (ongewenste) gevolgen. Inmiddels is de tegenbeweging op gang gekomen en groeit de populariteit van de speciaal voor opmaak ontwikkelde techniek: Cascading Style Sheets. 1.1 In dit hoofdstuk HTML is geen opmaaktaal. De scheiding van inhoud en opmaak. Opmaken met Cascading Style Sheets. Stijlbladen hebben een keerzijde. De toekomst van CSS. 1.2 Het web en opmaak De eisen aan de vormgeving van websites zijn met de jaren steeds hoger geworden. Dat vraagt nogal wat creativiteit van websitebouwers, omdat de taal waarmee webpagina s worden gemaakt, HyperText Markup Language (HTML), helemaal niet ontwikkeld is voor vormgeving. Gestructureerde tekst, gegevens in een tabel en vooral hyperlinks, de koppelingen tussen documenten, daar is HTML goed in. Om aan de wensen van gebruikers en bouwers van het web tegemoet te komen, is de HTML-specificatie uitgebreid met allerlei hulpmiddelen om de inhoud een aantrekkelijke vorm te kunnen geven. Met bijvoorbeeld de tag <font> worden probleemloos verschillende lettertypen en -groottes en flitsende kleuren aan koppen en alinea s gegeven. Nog beter werd het toen de onbedoelde mogelijkheden van tabellen werden ontdekt. Met tabellen is het mogelijk om tekst en afbeeldingen op webpagina s behoorlijk nauwkeurig te positioneren. Onder websitebouwers is een lay-out gebaseerd op tabellen dan ook de standaard geworden. 5

2 6 Basiscursus Cascading Style Sheets Figuur 1.1: De CSS-sectie op de website van W3C zoals die eruitziet in een tekstbrowser De manier waarop al die fraaie pagina s gecodeerd worden, heeft een keerzijde. Een pagina bestaat al snel uit een fiks aantal tabellen, met daarin weer andere tabellen. Dit nesten van tabellen kan een aantal niveaus diep gaan om een zo precies mogelijke lay-out te verkrijgen. Dat dit de code minder leesbaar maakt en de kans op fouten aanzienlijk vergroot, zal duidelijk zijn. Figuur 1.2: bevat 41 tabellen

3 1 Inleiding 7 De belangrijkste webbrowsers, vooral Internet Explorer, zijn zo geprogrammeerd dat een ontwerper het wel heel bont moet maken voordat een tabel niet goed wordt weergegeven. Dat lijkt prettig, maar als er eenmaal problemen ontstaan, kan het vinden van de fout erg moeilijk zijn. Daar komt bij dat niet elke browser even vergevingsgezind is. U loopt het risico dat bij sommige bezoekers uw pagina s er compleet anders uitzien of zelfs helemaal niet weergegeven worden. Een aardigheidje voor de liefhebber die snel wil weten uit hoeveel tabellen een willekeurige webpagina is opgebouwd. Open de broncode van de pagina in bijvoorbeeld Kladblok en voeg onderaan, vlak voor de tag </body> het volgende script toe: <script language= JavaScript > var tabellen = document.getelementsbytagname( table ) var totaal = tabellen.length alert( Pagina bevat + totaal + tabellen. ) </script> Sla de broncode op als htm-bestand (uiteraard lokaal) en open het lokale document in een browser. U krijgt ongetwijfeld een aantal foutmeldingen (er is immers geen verbinding met de oorspronkelijke server), maar uiteindelijk verschijnt de pagina met een dialoogvenster dat het aantal tabellen meldt. Een tweede probleem is het onderhoud van pagina s. Wie met behulp van de tag <font> en attributen als color een website van enige omvang een nieuw uiterlijk moet geven, is daar erg lang mee bezig. Ook kunnen documenten onnodig groot worden, waardoor het langer duurt voor ze in de browser van de bezoeker geladen zijn. Er kleven dus nogal wat nadelen aan het door elkaar gebruiken van structuurtags, die de inhoud van het document bepalen, en opmaaktags en -attributen. Het zou veel handiger zijn als structuur (inhoud) en vorm van elkaar gescheiden worden. Sterker nog: bij de uitvinding van HTML in 1990 was dat ook de opzet. De vraag naar opmaakmogelijkheden was echter sterker dan de wil om HTML te vrijwaren van voor opmaak bedoelde toevoegingen.

4 8 Basiscursus Cascading Style Sheets Figuur 1.3: Een overvloed aan fonttags maakt het onderhoud van deze pagina niet gemakkelijk 1.3 De voordelen van CSS De manier om de inhoud weer los te koppelen van de vorm is gebruikmaken van Cascading Style Sheets (CSS), ook wel stijlbladen of trapsgewijze opmaakmodellen genoemd. Hoewel het mogelijk is stijlen in het HTML-document te definiëren, heeft het gebruik van een of meer aparte stijlbladen de voorkeur. Waarmee vorm en inhoud dus daadwerkelijk van elkaar gescheiden worden. Figuur 1.4: hier komt uiteraard geen tabel aan te pas en natuurlijk zijn inhoud en opmaak gescheiden

5 1 Inleiding 9 Als u voor de overstap naar CSS een duwtje in de rug nodig hebt, kunt u XHTML in plaats van HTML gebruiken. XHTML staat voor Extensible HyperText Markup Language en is de opvolger van HTML. Het aardige van XHTML is dat het webauteurs domweg verbiedt nog code voor opmaak in de pagina op te nemen. Alle opmaak moet daardoor uit stijlbladen komen. Uitgebreide informatie over XHTML staat op Een korte toelichting op XHTML vindt u in appendix B. Met CSS kan van elk element op een webpagina bepaald worden hoe het eruitziet en waar het moet staan. U kunt bijvoorbeeld in een stijlblad bepalen dat op uw 261 pagina s tellende website alle koppen van niveau 1 paars moeten zijn. Meer dan de regel h1 { color: purple } is daar niet voor nodig. U voelt zelf wel aan hoe weinig tijd het zal kosten om de week erop alle koppen geel te maken. Met CSS is het ook mogelijk om alleen de opmaak van specifieke elementen te veranderen. U kunt aan elk element een unieke identificatie (id) toewijzen of aangeven dat een element tot een bepaalde opmaakklasse (class) behoort. De id s zijn bijvoorbeeld handig voor het nauwkeurig positioneren van blokken tekst. Met behulp van klassen kunt u met één stijlregel bepalen dat alle intro s van berichten op uw website vet moeten zijn. U kunt met CSS verschillende effecten maken, zoals tekst die oplicht als u er met de muisaanwijzer overheen beweegt, daar hoeft geen JavaScript aan te pas te komen. Ook allerlei andere speciale effecten kunt u realiseren met CSS. Denk aan geavanceerde menu s, waarvan de vervolgopties verschijnen als de gebruiker met de muisaanwijzer over de hoofdoptie beweegt. De browser moet de CSS-regels natuurlijk wel begrijpen en op de juiste manier verwerken. Aan die voorwaarde wordt op het moment van schrijven (herfst 2004) nog niet door alle browsers voldaan (zie paragraaf 1.4). Figuur 1.5: Dit menu is volledig gemaakt met CSS

6 10 Basiscursus Cascading Style Sheets Ten slotte is het met CSS mogelijk verschillende stijlbladen te maken voor verschillende media. U kunt bijvoorbeeld stijlen definiëren die alleen gebruikt worden als een pagina wordt afgedrukt. Met zo n printervriendelijke versie van uw pagina s voorkomt u bijvoorbeeld dat van lange regels een deel van de tekst wegvalt bij het afdrukken. 1.4 De keerzijde van CSS Het gebruik van stijlbladen heeft ook een herkenbaar en meestal overkomelijk nadeel. Zoals browserfabrikanten de ondersteuning van HTML op soms geheel eigen wijze interpreteerden, zo gaan ze soms ook nogal losjes om met CSS. Het gevolg is dat bepaalde stijlregels in de ene browser het bedoelde effect hebben, in de andere browser helemaal niets doen en in de derde tot een volkomen onverwacht resultaat leiden. Als uw webpagina s in verschillende browsers er hetzelfde uit moeten zien en dat dat gebeurt is minder vanzelfsprekend dan het lijkt zult u veel moeten testen. Waarschijnlijk moet u regelmatig trucs toepassen om tot een goed resultaat te komen en soms zult u moeten accepteren dat de browser u verslagen heeft. De verschillende manieren waarop browsers omgaan met CSS worden mooi geïllustreerd als u de CSS-hoofdpagina van het World Wide Web Consortium bezoekt: Open deze pagina eens met Internet Explorer 6 en daarna met Firefox 1.0, Opera 7 of Netscape 7. De verschillen zijn opvallend. Zo staat het kader met de lokale koppelingen (rechts) in bijvoorbeeld Firefox op een vaste positie, maar schuift het in Internet Explorer mee met de tekst. Het kan zijn dat de getoonde pagina er, tegen de tijd dat u ernaar kijkt, in elke moderne browser hetzelfde uitziet, hoewel... Figuur 1.6: De W3C-homepage voor CSS in Internet Exporer 6.0

7 1 Inleiding 11 Figuur 1.7: Dezelfde pagina in Firefox 1.0PR Vrijwel alle voorbeelden in deze Basiscursus zijn gemaakt met Firefox 1.0PR. Deze browser voert vrij nauwkeurig uit wat er volgens de CSS-specificatie zou moeten gebeuren. Een andere browser met goede CSS-ondersteuning is Opera. Waar blijft Internet Explorer 6 voor Windows dan? Deze browser scoort niet erg hoog op het criterium standards compliant het navolgen van de standaard. Natuurlijk kunt u niet om deze browser heen zolang alle versies van Internet Explorer samen meer dan 90 procent van de browsermarkt bezetten. Tenzij u zeker weet dat uw bezoekers allemaal Internet Explorer 6 gebruiken (op een intranet bijvoorbeeld), is de beste werkwijze het volgen van de W3Cstandaard. Om de onvolkomenheden van browsers op te vangen, past u het stijlblad op het eind van het ontwikkelproces aan met browserhacks (zie appendix C). Niets weerhoudt u ervan een aantal testbrowsers te installeren naast Internet Explorer. Dat is zelfs onmisbaar als u websites wilt bouwen voor een breed publiek. Alternatieven voor het Windows-platform zijn: Opera ( Mozilla/Firefox ( Netscape Navigator ( Voor Unix/Linux/Macintosh: Konqueror ( Mozilla/Firefox ( Galeon ( Safari (

8 12 Basiscursus Cascading Style Sheets Figuur 1.8: De CSS-pagina van W3C gezien door de ogen van Konqueror 3.1 onder Linux Goede stijlbladeditors hebben ingebouwde browserprofielen waarmee u het resultaat kunt testen zonder alle browsers te moeten installeren. Meer over editors leest u in hoofdstuk De ontwikkeling van CSS Het World Wide Web Consortium (W3C) is ontwikkelaar en beheerder van aan internet gerelateerde talen: (X)HTML, XML en ook CSS. In 1996, zes jaar na de uitvinding van HTML, werd Cascading Style Sheets level 1 een officiële aanbeveling (recommendation) van het W3C. CSS1 bood de mogelijkheid om op eenvoudige wijze af te komen van HTML-uitbreidingen als <center> of <font>. CSS 1 bevat al de meeste eigenschappen voor lettertype, kleur, achtergrond en tekst. Ook eigenschappen voor marges, padding (opvulling) en randen waren onderdeel hiervan, evenals weergavemogelijkheden en lijstopmaak. De basis die met CSS 1 is gelegd, wordt nu nog steeds gebruikt. CSS 2.0 bestaat sinds De specificatie betekende een ommekeer voor webontwerp, onder meer dankzij de toevoeging van eigenschappen voor positionering en zichtbaarheid van elementen. Opeens was het mogelijk ele-

9 1 Inleiding 13 menten overal op de pagina te plaatsen, ook driedimensionaal met een z-waarde, en ze met behulp van scripts ook nog over het scherm te laten bewegen: Dynamic HTML (DHTML) was geboren. DHTML is geen specificatie van W3C. De benaming is bedacht door browserfabrikanten. De techniek maakt gebruik van HTML, CSS en JavaScript. In hoofdstuk 8 leest u meer over dynamische opmaak. Figuur 1.9: De auteur was eind 1998 erg onder de indruk van deze DHTML-handleiding op Andere vernieuwingen in CSS 2.0 zijn onder meer: de introductie van mediatypen (verschillende stijlen voor verschillende media, zoals beeldschermen of printers); eigenschappen voor spraak; mogelijkheden voor internationalisatie (bijvoorbeeld Hebreeuwse nummering van opsommingen); meer mogelijkheden voor selectie van lettertypen; een uitbreiding van het selectormechanisme; toevoeging van nieuwe pseudo-klassen; het gebruik van systeemkleuren en systeemlettertypen; de mogelijkheid om de muisaanwijzer te veranderen.

10 14 Basiscursus Cascading Style Sheets Op het moment van schrijven is CSS 2.1 zo goed als klaar. Het is ook de specificatie die in dit boek wordt gehanteerd. Ten opzichte van versie 2.0 zijn de wijzigingen niet schokkend. Het zijn vooral verfijningen, enkele verbeteringen en een paar toevoegingen. Niet alle veranderingen worden door de huidige browsers ondersteund. Dat is natuurlijk niet zo vreemd, want pas bij de nieuwere browsers kunnen de veranderingen worden geïmplementeerd. Enkele veranderingen in CSS 2.1 ten opzichte van CSS 2.0 zijn: de kleurwaarde orange is toegevoegd; dedisplay-waarde inline-block is toegevoegd; decursor-waarde progress is toegevoegd; de lettertype-eigenschappen font-stretch en font-size-adjust zijn vervallen; de teksteigenschap text-shadow is vervallen. De nieuwste ontwikkeling is CSS 3. Ontwikkeling mag u heel letterlijk nemen, want het duurt nog geruime tijd voor CSS 3 gereed zal zijn. Onderdelen ervan naderen wel het eindstadium. Kenmerkend voor CSS 3 is de modulaire opbouw, een gevolg van de groeiende populariteit van CSS. Naarmate de techniek meer gebruikt wordt, neemt ook de behoefte aan aanpassingen toe. Het zou op den duur echter onbegonnen werk zijn om de uitdijende specificatie telkens weer te moeten bijwerken. CSS zou onhandelbaar worden, ook voor ontwikkelaars van weergaveapparaten, zoals een webbrowser. Het is veel eenvoudiger om de specificatie in logische stukken te verdelen, die elk afzonderlijk naar behoefte kunnen worden aangepast. Bovendien heeft niet elk apparaat de complete specificatie nodig. U kunt zich voorstellen dat het nogal wat programmacode vergt om volledige CSSondersteuning te programmeren en dat wordt met toekomstige uitbreidingen alleen maar meer. Bij een apparaat voor spraakweergave is ondersteuning voor kleur, marges of randen om maar iets te noemen nogal overbodig. Een dergelijk apparaat heeft voldoende aan het spraakdeel van CSS. Het vervolg lijkt simpel: wie een apparaat maakt en programmeert, bouwt gewoon naar eigen inzicht CSS-ondersteuning in. Helaas voor de producent en gelukkig voor u werkt het niet zo. U moet ervan op aan kunnen dat een apparaat dat voor een bepaald doel is gemaakt, volgens gestandaardiseerde normen zijn taak uitvoert, bijvoorbeeld HTML-documenten weergeven. Dit lijkt vanzelfsprekend, maar de browseroorlog eind jaren negentig heeft laten zien dat dit allerminst zo is. Wapens in de strijd waren onder meer obscure HTMLtags en eigen interpretaties van standaardtags. Het gevolg: tot op heden moeten webontwerpers zich in bochten wringen om een document er in alle browsers (ongeveer) hetzelfde te laten uitzien. De modulaire opbouw van CSS 3 biedt aan de ene kant dus flexibiliteit omdat per apparaat, of dat nu een browser, een spraaksynthesizer of een braillelezer

11 1 Inleiding 15 is, naar keus ondersteuning voor diverse CSS-modules kan worden ingebouwd. De beperking die het W3C oplegt (of in ieder geval krachtig aanbeveelt), is dat de mogelijkheden van de gekozen modules volledig moeten worden ondersteund. Op die manier moet u, als CSS-auteur, ervan verzekerd kunnen zijn dat het uiteindelijke resultaat overeenstemt met de verwachtingen. Vooralsnog bestaat CSS 3 uit dertig modules. Het voert te ver om de hele lijst hier op te nemen, maar het varieert van modules voor randen, positionering en kleur tot presentatieniveaus en de gebruikersinterface. Lang niet alle modules zijn van de grond af opgebouwd; van veel modules bestaat de basis uit de eigenschappen die u ook terugvindt in CSS 2. Daarnaast worden uiteraard veel nieuwe eigenschappen en waarden toegevoegd, en worden de mogelijkheden voor selectie van elementen uitgebreid. Als u de ontwikkeling van CSS 3 op de voet wilt volgen, kunt u het best dit adres raadplegen: Naast de gewone CSS-specificatie zijn er ook profielen. Profielen bestaan uit delen van de complete CSS-specificatie die het voor producenten van apparatuur eenvoudiger moeten maken CSS in te bouwen. Het principe van de profielen is vergelijkbaar met de modules van CSS 3. Er zijn drie profielen: voor mobiele apparaten (telefoons), voor televisies en voor eenvoudige printers. Al deze profielen zijn gebaseerd op CSS 1 en aangevuld met een klein deel van CSS 2. CSS is zeker niet de enige opmaaktaal. Hoewel bruikbaar in combinatie met XML (Extensible Markup Language) is hij vooral bedoeld voor (X)HTML. Voor XML en vergelijkbare talen bestaan er weer andere opmaaktalen, zoals XSL (Extensible Stylesheet Language) en daaraan verwante talen (XSLT, XPath en XSL-FO). In deze Basiscursus wordt alleen CSS besproken. Meer over de opmaak van XML vindt u in de Basiscursus XML herziene editie, door Harry Heijkoop (Academic Service 2004, ISBN ). 1.6 Samenvatting In dit hoofdstuk hebt u wat geleerd over de achtergronden en ontwikkelingen van CSS als middel voor documentopmaak. Daarbij is het volgende behandeld: HTML is een structuurtaal en niet bedoeld voor documentopmaak. In de loop der tijd zijn wel tags voor opmaak aan HTML toegevoegd, maar met XHTML, de opvolger van HTML, gecombineerd met CSS, is de weg terug ingeslagen. Het (X)HTML-document bevat de inhoud; opmaakkenmerken staan in het stijlblad.

12 16 Basiscursus Cascading Style Sheets Toepassing van CSS maakt documenten overzichtelijker, beperkt de hoeveelheid code en vereenvoudigt het onderhoud, vooral van omvangrijke sites. U kunt stijlbladen voor verschillende media schrijven, bijvoorbeeld voor beeldschermen en voor printers. CSS wordt niet door alle browsers even goed en consistent toegepast. Ontwerpen voor een gevarieerd publiek betekent veel testen in verschillende browsers. CSS is nog lang niet af als het al ooit af kan zijn. CSS 2 is de huidige versie, maar aan CSS 3 wordt volop gewerkt. Kenmerkend voor CSS 3 is de modulaire opbouw.