Bijlage Onderzoeksrapport Onderwerp: HTML 5 - CSS 3.0 - Web 3.0 Opdrachtgever: Karel de Heer Opdrachtnemers: Future Websolutions Tom Somerville 428573 Roy Rutten 428148 Rob Lohmann 429898 Gerard Peters 407841 Rick Oonk 430604 Plaats en datum: Arnhem, 12-01-2010 1
Inhoudsopgave CSS 3 ONDERWERPEN... 3 INLEIDING... 4 BORDERS... 5 Rounded Corners / border radius... 5 Border Color... 8 Box-shadow... 10 Border-image... 12 TEXT EFFECTS... 15 Text-shadow... 15 Text-overflow... 18 Word-wrap... 20 BACKGROUNDS... 22 Background-origin en background-clip... 22 Background-size... 25 Multiple background images... 26 COLORS... 27 USER INTERFACE... 29 Box-Sizing... 29 Resize... 32 Outline... 34 SELECTORS... 36 Attribute Selectors... 37 MEDIA QUERIES... 39 MULTI-COLUMN LAYOUT... 42 WEB FONTS... 44 TRANSFORMATIONS... 47 ANIMATIONS / TRANSITIONS... 51 HTML 5 ONDERWERPEN... 54 CANVAS... 55 DATALIST... 57 COMMAND... 58 AUDIO... 59 HET OPBOUWEN VAN EEN PAGINA IN HTML 5... 61 VIDEO ELEMENT... 65 2
CSS 3 Onderwerpen 3
Inleiding Dit document is een uitwerken van alle nieuwe mogelijkheden en verbeteringen van CSS3. Per onderwerp wordt hier uitgelegd: - Wat is het? - Hoe werkte het in de vorige versie? - Hoe werkt het in CSS3? - Is het een verbetering ten opzichte van de vorige versie van CSS? - In welke browsers wordt het ondersteund? - Welke bronnen zijn gebruikt om aan deze informatie komen. Om onderstaande demo's werkend te krijgen dient er gebruik gemaakt te worden van een Prefix. Een Prefix is per browser verschillend. Per browser is de implementatie anders. Omdat alles nog in Beta is kan op elk moment de implementatie gewijzigd worden. Het geeft de gebruikers wel alvast de mogelijkheid om te spelen met de nieuwe mogelijkheden van CSS 3. Prefix Mozilla Firefox: Google Chrome/Safari: Opera: -moz- -webkit- -o- Voorbeeld border-radius: 15px -> -moz-border-radius: 15px Dit document word vervolgens als bijlage bij het onderzoeksrapport geplaatst. 4
Borders Rounded Corners / border radius Wat is/doet het? De laatste jaren komen ronde hoeken steeds meer voor op het web. Doormiddel van ronde hoeken kan een webpagina er al heel anders uit komen te zien. Een blik op internet leerde dat er tal van oplossingen de wereld rondgaan. Wat ik onder andere tegenkwam: veel tabelconstructies, CSS maar niet geschikt voor transparantie, wel doorzichtig maar niet flexibel, javascript methodes, beeldscherm vullende images(elke hoek een image). Alle denkbare varianten, maar geen eenvoudige universele oplossing waar je alle kanten mee op kunt. In CSS 3 blijkt er een goede oplossing voor bedacht te zijn. Hoe werkte het in de vorige versie van CSS? CSS boxen kan je vergelijken met het weergeven van info via een tabel, alleen gebruiken we natuurlijk geen tabellen voor de layout van een website. Hiervoor is in CSS 2 een oplossing bedacht met 5 kleine afbeeldingen, 1 voor elke hoek en 1 voor de achtergrond op te vullen. Deze zijn goed geschikt voor content doeleinden, de boxen schalen namelijk ook mee met de inhoud..rbroundbox { background: url('nt.gif') repeat;.rbtop div { background: url('tl.gif') no-repeat top left;.rbtop { background: url('tr.gif') no-repeat top right;.rbbot div { background: url('bl.gif') no-repeat bottom left;.rbbot { background: url('br.gif') no-repeat bottom right;.rbtop div,.rbtop,.rbbot div,.rbbot { width: 100%; height: 7px; font-size: 1px;.rbcontent{ height:20%;.rbroundbox { width: 20%; 5
Hoe werkt het in CSS 3? border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color:lightgrey; height:50px; width:100px; De twee eigenschappen van de code hierboven zijn "-MOZ-border-radius" en "-WebKit-borderradius." De eerste is de manier om de straal, het aantal pixels van het centrum naar de rand van de cirkel, aan te geven in de Mozilla browser. Dit laatste is hetzelfde te doen, maar dan voor Safari. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 6
Is het een verbetering ten opzichte van de voorgaande versie? In CSS 3 is er dus eindelijk een oplossing bedacht voor het ronde hoeken probleem. In CSS3 wordt het een stuk eenvoudiger en er is bovendien een stuk minder code voor nodig. Ook is het voortaan mogelijk om het dus zonder plaatjes te doen waardoor het op performance gebied ook een verbetering is. Ik heb een onderzoek gedaan naar de performance van de oude manier en de nieuwe manier van ronde hoeken maken. Ik heb een HTML pagina gemaakt met daarin 63 vakjes(div). Deze heb ik vervolgens ronde hoeken gegeven op de CSS2 manier en op de CSS3 manier. De CSS2 manier heb ik getest met 5 plaatjes, elk van nog geen 1kb groot. Ik heb met javascript en een onload functie gemeten hoe lang het duurt voor de pagina geladen is. In onderstaande tabel zijn de resultaten opgenomen. Rounded Corners CSS2 CSS3 Laadtijd in milliseconden 63 vakjes Test 1 34 14 Test 2 32 21 Test 3 35 15 Test 4 34 14 Test 5 34 13 Gemiddeld 33,8 15,4 Uit deze test is gebleken dat de CSS3 manier dubbel zo snel is als de CSS2 manier. Toch zijn dit milliseconden en zal de gebruiker hier niks van merken. In de praktijk is het vaak zo dat de plaatjes groter van formaat en ook uit een grotere bestandsgrootte bestaat. Mijn verwachting hierbij is dat op het moment van meer elementen met ronde hoeken dat er meer verschil in performance zal komen. Een voordeel bij de CSS3 manier is ook dat er geen plaatjes voor gedownload hoeft te worden. Nog een enorme verbetering is dat het in CSS3 geen regel HTML en slechts een regel CSS kost. Daar staat in CSS2 8 regels HTML en op zijn minst 10 regels CSS. Over het algemeen is dit een grote vooruitgang voor webdesigners. Bronnen: http://www.css3.info/preview/rounded-border/ http://24ways.org/2006/rounded-corner-boxes-the-css3-way http://www.awarenessengine.com/code-corner/161-css-code/200-rounded-corners.html http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-bordercollapsecollapse-dont-mix-how-can-i-u 7
Border Color Wat is/doet het? Hiermee geef je de kleur aan van een border. Hoe werkte het in de vorige versie van CSS? In de vorige versies van css was deze functie niet aanwezig, en kon je alleen een border instellen met een bepaalde kleur en dikte. Hoe werkt het in CSS3? Je kan in CSS3 en CSS2 aangeven wat voor kleur je geven aan deze border op de volgende manier: border: 8px solid #000; Hier staat #000 voor de kleur zwart, Solid voor een vaste lijn en 8px voor de dikte van de lijn. In CSS3 hebben ze nog een extra optie gegeven en dat is om meerdere kleuren in een border te verwerken. -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; Zo kan je een verloop van kleuren, maar ook willekeurige kleuren gebruiken voor de border zoals hier onder staat. -moz-border-bottom-colors: #555 #328 #777 #ccc #888 #fff #aaa #bbb ; -moz-border-top-colors: #555 #328 #777 #ccc #888 #fff #aaa #bbb ; -moz-border-left-colors: #555 #328 #777 #ccc #888 #fff #aaa #bbb ; -moz-border-right-colors: #555 #328 #777 #ccc #888 #fff #aaa #bbb ; 8
Is het een verbetering ten opzichte van de voorgaande versie? Het is meer een nieuwe functie dan verbetering, maar als je kijkt naar hoe je een border kan stijlen in CSS3 is het zeker een verbetering. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/colored-border/ http://www.zenelements.com/blog/css3-border-color-colour/ http://www.cssportal.com/css3-preview/borders.htm 9
Box-shadow Wat is/doet het? De box-schadow eigenschap is er om een schaduw toe te voegen aan een box element. Met een box element bedoel ik hier elk HTML element dat is opgenomen is het CSS box model. Een schaduw effect zorgt voor meer diepgang en een mooiere overgang tussen elementen. Hoe werkte het in de vorige versie van CSS?.blur{ background-color: #ccc; /*shadow color*/ color: inherit; margin-left: 4px; margin-top: 4px; width:100px; height:116px;.shadow,.content{ position: relative; bottom: 2px; right: 2px;.shadow{ background-color: #666; /*shadow color*/ color: inherit;.content{ background-color: #6B86A6; /*background color of content*/ color: #000; /*text color of content*/ padding:.5em 2ex; height:100px; Doormiddel van verschillende div's die over elkaar heen liggen wordt er een schaduw gecreëerd. 10
Hoe werkt het in CSS 3? body { background-color:#fff; #box { width:100px; height:100px; margin:100px auto 0; -moz-box-shadow:3px 3px 10px #999; -webkit-box-shadow:10px 10px #555; background-color:#6b86a6; #box p { margin-left:10px; float:left; In CSS3.0 is er dus een nieuwe eigenschap genaamd box-schadow. Deze box-schadow bezit de volgende 4 eigenschappen: - Horizontale positie, positieve waarde betekent dat de schaduw rechts van het element komt en bij een negatieve waarde komt de schaduw links van het element. - Verticale positie, negatieve waarde betekent dat de schaduw aan de bovenkant van het element komt en bij een positieve waarde aan de onderkant. - Blur, bij een 0 waarde is de schaduw scherp, hoe hoger het nummer hoe vager de schaduw. - Kleur Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Is het een verbetering ten opzichte van de voorgaande versie? In CSS 3 is er een oplossing bedacht om schaduwen te creëren zonder het gebruik van images. In CSS3 wordt het een stuk eenvoudiger en er is bovendien een stuk minder code voor nodig. Ook is het voortaan mogelijk om het dus zonder plaatjes te doen waardoor het op performance gebied ook een grote verbetering is. Over het algemeen is dit dus een grote vooruitgang voor webdesigners. Bronnen: http://phoenity.com/newtedge/drop_shadow/ http://www.css3.info/preview/box-shadow/ 11
Border-image Wat is/doet het? Het geeft je de mogelijkheid om een plaatje te gebruiken als border. Zo is het hier mogelijk een plaatje te gebruiken om iedere zijde van een element een rand te geven. Een plaatje zoals deze hiernaast kan worden gebruikt om de rand te creëren. Je kan aangeven welk gedeelte van het plaatje gebruikt moet worden. Hoe werkte het in de vorige versie van CSS? In de vorige versie van CSS was het niet mogelijk om plaatjes te gebruiken als border. Wat wel kon is elementen met een plaatje naast het hoofdelement plaatsen dat je eigenlijk een border zou willen geven. Zo kan je als het ware je eigen border maken. Als je in het plaatje hiernaast alle stippellijnen zou knippen en al die elementen los tegen het hoofdelement plaatsen dan heb je hetzelfde effect. Op de volgende pagina een voorbeeld. 12
.rbroundbox { background: url('nt.gif') repeat;.rbtop div { background: url('tl.gif') no-repeat top left;.rbtop { background: url('tr.gif') no-repeat top right;.rbbot div { background: url('bl.gif') no-repeat bottom left;.rbbot { background: url('br.gif') no-repeat bottom right;.rbtop div,.rbtop,.rbbot div,.rbbot { width: 100%; height: 7px; font-size: 1px;.rbcontent{ height:20%;.rbroundbox { width: 20%; Elke lijn is hieronder de rand van een plaatje. <div class="rbroundbox"> <div class="rbtop"> <div></div> </div> <div class="rbcontent"> CSS2 </div> <div class="rbbot"> <div> </div> </div> </div> Hoe werkt het in CSS3? Bij onderstaand voorbeeld geef ik aan dat de border 20px breed moet zijn en ook welk plaatje gebruikt moet worden. Ik geef met de 20 aan dat ik 20px van alle zijdes uit het plaatje wil. 13
border-width: 20px; border-image: url("border.png") 20; Is het een verbetering ten opzichte van de voorgaande versie? Er was in de voorgaande versie nog geen mogelijkheid tot het gebruiken van plaatjes voor de border. Daarom is dit zeker een verbetering, omdat hetgeen nog niet bestond in de vorige versie van CSS. Om hetzelfde effect te Daarom werd dit vaak op een omslachtige manier gemaakt en dat kost een stuk meer performance. Ook vergde het een stuk meer HTML Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/border-image/ http://www.w3.org/tr/css3-background/ http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders http://ejohn.org/blog/border-image-in-firefox/ http://www.lrbabe.com/sdoms/borderimage/index.html 14
Text Effects In CSS3 zijn er een aantal eigenschappen voor text bijgekomen. Deze zullen wij hieronder beschrijven. Text-shadow Wat is/doet het? De text-schadow eigenschap is er om een schaduw toe te voegen aan een tekst element. Een schaduw effect zorgt voor meer diepgang en een mooiere overgang. In het verleden werd vaak photoshop gebruikt om tekst een schaduw te geven. Hoe werkt het in CSS 3? text-shadow: 1px 1px 3px #000; In CSS3.0 is er dus een nieuwe eigenschap genaamd text-schadow. Deze text-schaduw bezit de volgende 4 eigenschappen: - Horizontale positie, positieve waarde betekent dat de schaduw rechts van het element komt en bij een negatieve waarde komt de schaduw links van het element. - Verticale positie, negatieve waarde betekent dat de schaduw aan de bovenkant van het element komt en bij een positieve waarde aan de onderkant. - Blur, bij een 0 waarde is de schaduw scherp, hoe hoger het nummer hoe vager de schaduw. - Kleur 15
Hoe werkte het in de vorige versie van CSS?.shadow { /* Internet explorer */ height: 1em; filter: Shadow(Color=#666666, Direction=135, Strength=5); line-height: 2em; white-space: nowrap; /* * :before om schaduw te creeeren */.shadow:before { display: block; margin: 0 0-2.12em 0.15em; padding: 0; color: #666666; #shadow_1:before { content: 'Text Schadow CSS2'; html*.shadow { [color:red text-shadow: #666666 5px 5px 5px; ]color:auto; /* reset kleur voor IE6 */.dummyend[id]{clear: both; html*.shadow:before { [color:red; display: none; ]color:auto;.dummyend[id]{clear: both; Doormiddel van 2 teksten die achterelkaar zijn geplaatst is er als het ware een schaduw gecreëerd. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 16
Is het een verbetering ten opzichte van de voorgaande versie? Doormiddel van 1 regel code is het mogelijk om in CSS3 schaduw toe te voegen aan tekst. In CSS2 is dit ongeveer 10 keer zo veel. Wat betreft vereenvoudiging is het dus zeker een verbetering te noemen. Bronnen: http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows http://www.css3.info/preview/text-shadow/ http://www.cssportal.com/css3-preview/text-shadow.htm http://phoenity.com/newtedge/drop_shadow/ 17
Text-overflow Wat is/doet het? In sommige situaties komt het wel eens voor dat de tekst te lang is voor het box element waar het zich in bevindt. Wanneer dit zo is dat is het wel zo fijn als de gebruiker een hint krijgt dat de tekst is weggevallen. Op dat moment komt de text-overflow eigenschap in beeld. Hierbij is het bijvoorbeeld mogelijk om de ellipsis te gebruiken, dit zorgt voor 3 puntjes(...). Op het moment dat de gebruiker dan over de tekst heen gaat met zijn muis dan komt de tekst weer tevoorschijn(hover). Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er nog geen text-overflow, in dat geval combineerde je een div met een overflow: hidden. Dat ziet er in CSS2 dan als volgt uit: div.overflow { width:200px; overflow:hidden; height:20px; div.overflow:hover { overflow:inherit; width:500px; Hoe werkt het in CSS 3? div.ellipsis { width: 14em; height: 1.6em; text-overflow: ellipsis; div.ellipsis:hover { text-overflow: inherit; In CSS3.0 is er dus een nieuwe eigenschap genaamd text-overflow. Deze text-overflow heeft de volgende mogelijkheden: - ellipsis: Zorgt voor de 3 puntjes en knipt gewoon op het einde weg. - clip: Geeft geen 3 puntjes en knipt gewoon het woord door het midden. - ellipsis-word: Geeft 3 puntjes en zorgt ervoor dat er niet midden in een woord weggeknipt wordt. Laatste woord volledig weergegeven. 18
Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Is het een verbetering ten opzichte van de voorgaande versie? Het grote voordeel van de text-overflow is de mogelijkheid ellipsis. Deze mogelijkheid zorgt voor de 3 puntjes achter de geknipte tekst. Deze 3 puntjes konden in de voorgaande versie niet makkelijk met CSS neergezet worden waardoor dit gedaan moest worden met bijvoorbleed PHP. Bronnen: http://www.w3schools.com/css/pr_pos_overflow.asp http://www.css3.info/preview/text-overflow/ http://www.websonic.nl/tutorials/websitecss/css_overflow.php 19
Word-wrap Wat is/doet het? Het komt wel eens voor dat een woord te lang is voor een box element. In dat geval zal het woord dus eigenlijk in 2 delen gesplitst moeten worden met een enter. Dit kan in CSS 3.0 met de nieuwe word-wrap eigenschap. Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er nog geen word-wrap, in dat geval was men verplicht om een lang woord te splitsen met een teken(-). Dit zit er dan als volgt uit: <style> div { width: 100px; border:1px solid; </style> <div>heeeeellang-woordje</div> Hoe werkt het in CSS 3? div.test1 { width: 100px; word-wrap: break-word; border:1px solid; div.test2 { width: 100px; border:1px solid; Met word-wrap Zonder word-wrap In CSS3.0 is er dus een nieuwe eigenschap genaamd word-wrap. Deze word-wrap heeft de volgende mogelijkheden: - Normal: Op dit moment gebeurd er niks. De tekst is breder dan de breedte van het box element. - break-word: Het woord wordt gesplitst in 2 delen als het breder is dan de breedte van het box-element. 20
Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Is het een verbetering ten opzichte van de voorgaande versie? Het gebruik van word-wrap kan zeker zijn voordelen hebben. Zo is het een stuk dynamischer als je bijvoorbeeld teksten uit XML inlaad. Hierbij hoeft er geen rekening gehouden te worden met woorden die breder zijn dan de div. Bronnen: http://www.css3.info/preview/word-wrap/ http://www.css3.com/css-word-wrap/ 21
Backgrounds Een background is de achtergrond van een html element. Background-origin en background-clip Wat is/doet het? De background-origin eigenschap wordt gebruikt om de positie van de achtergrond te bepalen binnen een element. De background-clip eigenschap wordt gebruikt om aan te geven of de achtergrond ook onder de border bestaat. Hoe werkte het in de vorige versie van CSS? Dit was nog niet mogelijk in de vorige versies van CSS. Dit geeft je eigenlijk ook meer opties bij het plaatsen van je achtergrond. Een veelal gebruikte oplossing om dit toch voor elkaar te krijgen was om een rand om het achtergrond plaatje te maken. Deze rand was dan transparant zodat je er niks van zag. Hoe werkt het in CSS3? Met de background-clip kan je bepalen of de totale achtergrond begint waar de border begint of juist op de plaats waar de padding begint. Met de background-origin kan je bepalen waar het achtergrond plaatje begint. De opties die je daarvoor hebt zijn: begin van de border, begin van de padding of begin van de content. Hieronder zie je 3 verschillende manieren van background-origin met de background-clip border. Uitleg: - De border is geel. - Het rode vakje is het achtergrond plaatje. - De achtergrond kleur is blauw. 22
#test1 { background-clip: padding; background-origin: border; #test2 { background-clip: padding; background-origin: padding; #test3 { background-clip: padding; background-origin: content; 23
Hieronder zie je 3 verschillende manieren van background-origin met de background-clip padding. #test4 { background-clip: border; background-origin: border; #test5 { background-clip: border; background-origin: padding; #test6 { background-clip: border; background-origin: content; Is het een verbetering ten opzichte van de voorgaande versie? Dit is zeker een verbetering, omdat hetgeen nog niet bestond in de vorige versie van CSS. Je krijgt hierdoor een stuk meer mogelijkheden met de achtergrond. Mogelijkheden die je eigenlijk voorheen niet had. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://djdesignerlab.com/2009/11/01/future-of-web-design-css3-techniques-tips-and-tutorials/ http://www.css3.info/preview/background-origin-and-background-clip/ 24
Background-size Wat is/doet het? Je kan hiermee aangeven hoe groot de achtergrond moet zijn. Hoe werkte het in de vorige versie van CSS? In de vorige versie van CSS was het niet mogelijk om de grootte van een achtergrond op te geven. Wel kon je aangeven of hij herhaald mocht worden of niet. Zo kon je dus wel aangeven of de hele achtergrond rood mocht zijn of alleen linksboven of rechtsonder. De grootte van het achtergrondplaatje in de browser was compleet afhankelijk van de grootte van het plaatje. Als je de achtergrond grootte wilde veranderen dan veranderde je het plaatje. Hoe werkt het in CSS3? background-size: 100px 60px; Is het een verbetering ten opzichte van de voorgaande versie? De optie om de achtergrond grootte was er nog niet dus het bied zeker een voordeel. Zo heb je wederom meer mogelijkheden met de achtergrond. Aangezien het in de voorgaande versies niet mogelijk was moest je het plaatje vergroten of verkleinen en dat is een omslachtige manier. Want stel dat je het zelfde plaatje op meerdere plaatsen wil gebruiken met verschillende groottes dan moest je in de voorgaande versie meerdere plaatjes gebruiken. Het is zo zeker een verbetering. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://webdesign.about.com/od/examples/l/blbgsizeexample.htm http://www.css3.info/preview/background-size/ http://www.zenelements.co.uk/blog/css3-background-images/ https://developer.mozilla.org/en/css/-moz-background-size 25
Multiple background images Wat is/doet het? In CSS3 is het nu mogelijk om meerdere achtergronden op te geven voor een element. Hoe werkte het in de vorige versie van CSS? In de vorige versie was het niet mogelijk om meerdere plaatjes als achtergrond voor een element in te stellen. Om voor hetzelfde effect te zorgen in CSS2 maakte je een vast achtergrond plaatje. Maar als het element kan veranderen in grootte zou dit meestal niet goed gaan. Want dan word het plaatje uitgerekt. Hoe werkt het in CSS3? Je kan in de normale background eigenschap meerdere plaatjes opgeven en de plaats. background: url(img/background.png) top left no-repeat, url(img/border.png) bottom left no-repeat, url(img/background.png) bottom right norepeat; Is het een verbetering ten opzichte van de voorgaande versie? Als er gekeken word naar de oude manier van hetzelfde effect creeren dan is dit zeker een verbetering. Op deze manier kan je makkelijk en snel meerdere achtergronden aan een element geven. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/multiple-backgrounds/ http://www.w3.org/tr/css3-background/ http://www.zenelements.co.uk/blog/css3-background-images/ 26
Colors Wat is/doet het? In CSS 3.0 zijn er een aantal nieuwe mogelijkheden bij gekomen wat betreft het kiezen van kleuren. Zo is er een nieuwe mogelijkheid genaamd HSL. Deze afkorting staat voor Hue, Saturation en Lightness. Hue (tint), is 'kleur' te noemen. In het HSL-model is de kleur uitgezet in een cirkelvorm. Het aantal graden geeft eenduidig een tint aan. Een 360 rondgang om de cirkel doorloopt precies de kleuren van de regenboog. Saturation (verzadiging). De verzadiging wordt aangegeven als de afstand tot de centrale as, in procenten (100% = de buitenrand halverwege; 0% is de centrale as, die alleen maar grijs is). Lightness (helderheid, lichtheid, grijsheid) is de licht/donkerheid van een kleur, lopend van zwart naar wit. Deze maat wordt aangegeven op de centrale as van het model, in procenten (100% = de witte top). Naast deze HSL is er ook een uitbreiding genaamd HSLA. Deze heeft als 4e eigenschap Alpha. Dit wil zeggen dat er een mogelijkheid is om een HSL kleur een opacity te geven. Deze Alpha eigenschap kan in CSS 3.0 ook toegevoegd worden aan een RGB kleur. Dit heeft dus de naam gekregen: RGBA. Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er nog geen mogelijkheid om gebruik te maken van HSL. De gebruiker kan dus enkel gebruik maken van RGB en Opacity. Dit ziet er dan als volgt uit: RGB met Opacity.div 1{ background: rgb(255, 0, 0); opacity:0.3.div 2{ background: rgb(255, 0, 0); opacity:0.3.div 3{ background: rgb(255, 0, 0); opacity:0.3 Een nadeel wat hierbij optreedt is dat de opacity ook voor de inhoud van de div geldig is. Dus niet alleen voor de kleur van de div. Dit is ook zichtbaar in het resultaat van bovenstaande code. 27
Hoe werkt het in CSS 3? HSL.div 1{ background-color: hsl(0,100%, 50%);.div 2{ background-color: hsl(120,100%, 50%);.div 3{ background-color: hsl(240,100%, 50%); HSLA.div 1{ background-color: hsla(0,100%,50%,0.3);.div 2{ background-color: hsla(0,100%,50%,0.6);.div 3{ background-color: hsla(0,100%,50%,0.9); RGBA.div 1{ background: rgba(255, 0, 0, 0.3);.div 2{ background: rgba(255, 0, 0, 0.6);.div 3{ background: rgba(255, 0, 0, 0.9); Is het een verbetering ten opzichte van de voorgaande versie? Het kunnen gebruiken van HSL kleuren kan zeker een voordeel zijn. Vooral designers die veel gebruik maken van Photoshop zullen hier gebruik van maken. Ook de nieuwe mogelijkheid Alpha is een stuk makkelijker geworden in het gebruik ervan. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/hsl/ http://www.w3.org/tr/css3-color/ http://nl.wikipedia.org/wiki/hsl_(kleurruimte) 28
User Interface Box-Sizing Wat is/doet het? In CSS 3.0 is er een nieuw attribuut bijgekomen genaamd box-sizing. Met deze box-sizing is het mogelijk om de borders en de paddings toe te voegen aan de width van een element. Bij het volgende voorbeeld zal ik laten zien in welke situatie dit bruikbaar is: Stel je wilt 2 elementen en geeft het linker element een width van 30% en de rechter een width van 70%. Dit zal er dan als volgt uitzien: Op het moment dat ik nu beide elementen bijvoorbeeld een border geef wordt de totale width groter dan 100%. Dit wil zeggen dat het niet op één pagina past waardoor het rechtse element(rood) onder het linkse element(groen) komt te staan. Hier is het box-sizing element dus toepasbaar. Op het moment dat je deze gebruikt zal de width van het element met borders gewoon 30% en 70% blijven. Op onderstaande afbeelding is duidelijker te zien wat hierboven bedoelt wordt. In CSS3.0 box-sizing valt de border en de padding bij de content width. Dit is zichtbaar in het bovenste vierkant. In het onderste vierkant is de CSS2 zonder box-sizing zichtbaar. Hier valt de padding en de border buiten de contact width. 29
Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er nog geen mogelijkheid box-sizing. De gebruiker had dan de mogelijkheid om gebruik te maken van onderstaande hack: <style> #Links{ width: 30%; height:500px; float:left; background:green; #Links div{ border: solid 1px; padding-left: 20px; height:500px; #Rechts{ width: 70%; height:500px; background:red; float:left; #Rechts div{ border: solid 1px; padding-left: 20px; height:500px; </style> <div id="links"> <div>links</div> </div> <div id="rechts"> <div>rechts</div> </div> Hierboven is er een hack toegepast om de box-sizing te realiseren. In de div, die een width heeft gekregen, zit weer een andere div. Aan de binnenste div wordt de padding en de border gegeven waardoor de bovenstaande div daar niks van merkt en dus de juiste width behoudt. Deze manier is natuurlijk niet zo netjes en bovendien niet volgens de W3C standaard. 30
Hoe werkt het in CSS 3? HSL.Links { float:left; width: 30%; background:green; height: 500px; border:solid 1px black; -moz-box-sizing:border-box; padding-left:10px;.rechts { float:left; width: 70%; background:red; height: 500px; border:solid 1px black; -moz-box-sizing:border-box; padding-left:10px; Doordat beide elementen een border en een padding hebben zou het rode blok normaal gesproken onder het groene blok komen. Wat dan een oplossing zou kunnen zijn is hierboven aangegeven met de hack. Is het een verbetering ten opzichte van de voorgaande versie? Het nieuwe attribuut box-sizing zal in de toekomst zeker gebruikt gaan worden voor het width probleem met border en paddings. Het gebruik maken van een hack is nou eenmaal niet wat je graag wilt als webdesigner. Daarnaast is het gebruik van de hack niet W3C standaard wat met de box-sizing wel zo is. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 * In Internet Explorer is deze box-sizing reeds de standaard. De manier van box-sizing kan niet verandert worden. Bronnen: http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml http://www.quirksmode.org/css/box.html http://www.css3.info/preview/box-sizing/ 31
Resize Wat is/doet het? In CSS 3.0 is er een nieuw attribuut bijgekomen genaamd resize. Met deze resize is het mogelijk om een tekstvak uit te rekken zodat er meer tekst in één oogopslag leesbaar is zonder al te veel te hoeven scrollen. Het oprekken kan horizontaal en verticaal of een van deze twee. Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er nog geen mogelijkheid resize. De gebruiker had dan alleen de mogelijkheid om gebruik te maken scrollbars: <style> div.resize2 { width:200px; height: 100px; border: 1px solid; overflow-x: scroll; overflow-y: scroll; </style> Horizontale en verticale scrollbars zullen verschijnen wanneer de tekst niet volledig in zijn vierkant past. In CSS3.0 is iets nieuws verzonnen waarmee het scrollen verminderd kan worden. Hoe werkt het in CSS 3? HSL <style> div.resize { width: 100px; height: 100px; border: 1px solid; overflow: auto; resize:both; </style> Doormiddel van het attribuut resize:both wordt er rechtsonder een hoek met 2 lijntjes getoond(cirkel). Als je klikt op dit hoekje en begint te slepen rekt het vierkant met de tekst op. Hierdoor is er meer tekst in de breedte of hoogte leesbaar. Het is ook mogelijk om een max-width en max-height mee te geven waardoor het vierkant nooit groter wordt dan zijn content. De opties die bij het resize attribuut kunnen worden meegegeven zijn: Both: Zowel horizontaal als verticaal op te rekken. Horizontal: Alleen horizontaal uitrekbaar. Vertical: Alleen verticaal uitrekbaar. 32
Is het een verbetering ten opzichte van de voorgaande versie? Het kunnen oprekken van een text-element is zeker een verbetering voor de gebruikersvriendelijkheid. Het scrollen in CSS2 is iets wat niet handig is en vooral onoverzichtelijk. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/resize/ http://www.paradoxdgn.com/archives/241 http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface 33
Outline Wat is/doet het? In CSS 3.0 is er een attribuut Outline. Deze Outline eigenschap heeft erg veel weg van een normale border. Het verschil tussen een border en een outline is: - Een outline neemt geen ruimte in: dit wil zeggen dat het over andere element heen komt te liggen. Hoe werkte het in de vorige versie van CSS? In CSS2.0 was er ook al een mogelijkheid voor de outline. Deze zag er als volgt uit: <style>.outline2{ outline: thin solid #897048; </style> Deze outline eigenschap wordt eigenlijk zelden gebruikt. Enkele programma's gebruiken outline om te debuggen. Het is dan heel makkelijk te zien waar zich alle elementen bevinden op de pagina. Hoe werkt het in CSS 3? HSL <style>.outline { width: 150px; padding: 10px; height: 70px; border: 2px solid black; outline: 2px solid #897048; outline-offset: 15px; margin:50px; </style> In CSS 3 is er een nieuw eigenschap bijgekomen voor het outline attribuut. Het is in CSS 3 ook mogelijk om een offset te geven aan de outline. Hierdoor is het niet nodig om allerlei paddings te geven bij het gebruik van een border. Is het een verbetering ten opzichte van de voorgaande versie? Dat er voortaan een offset kan worden meegegeven aan de outline is zeker een waardevolle toevoeging. In CSS wordt outline niet veel gebruikt waardoor dit enkel een verbetering is aan iets wat zelden wordt gebruikt. 34
Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://stackoverflow.com/questions/1158515/difference-between-outline-and-border http://www.w3schools.com/css/pr_outline.asp http://www.quirksmode.org/css/outline.html 35
Selectors Om een element in een pagina bijvoorbeeld een kleur te geven moet aangegeven worden om welk element het gaat. Dit gebeurt met een selector. Hierbij heb je heel veel verschillende mogelijkheden om een element te selecteren. Je kan het element een id of een class geven. Dan gebruik je in CSS voor een class een punt(. ) en voor een id een hekje(#). Bijvoorbeeld: #test -> het element met id test..test -> alle elementen met class test. Ook kan je de tag van het element gebruiken om iets te selecteren. Hieronder een voorbeeld van een selector met tags. #content li span Bij dit voorbeeld geef ik aan dat hij in eerste instantie in het element met het id content moet kijken. Ik wil dan dat de span binnen een li geselecteerd word. Samengevat: Alle <span> elementen binnen een <li> elementen binnen het element met het id content..testclass { background-color: green; #aid { background-color: yellow; #content ul li span { background-color: blue; <div id="content"> <ul> <li> <p id="testid" class="testclass">p met id: testid en class: testclass</p> </li> <li> <p id="pid" class="testclass">p met id: pid en class: testclass</p> </li> <li> <a id="aid" class="aclass">a met id: aid en class: aclass</a> </li> <li> <span id="spanid" class="spanclass">span met id: spanid en class: spanclass</span> </li> </ul> </div> 36
Attribute Selectors Wat is/doet het? In CSS3 zijn er meer manieren bedacht om een element te kunnen selecteren voor een stijl. Het gaat hier om de mogelijkheid om een element te selecteren aan de hand van de waarde in een attribuut. Er kan hierbij gekozen worden voor 3 manieren van voorkomen van een waarde in een attribuut. - ^ staat voor het zoeken aan het begin van de waarde in een attribuut. - $ staat voor het zoeken aan het einde van de waarde in een attribuut. - * staat voor het voorkomen van de waarde in een attribuut. element[attribute { ^= $= *= attribute value] Hoe werkte het in de vorige versie van CSS? Deze manier van attribuut selectie is niet mogelijk in voorgaande versies van CSS. Om toch de goede elementen te selecteren werd door de gebruiker zelf nagekeken welke elementen het moest hebben en dan een class of een id meegegeven. Hoe werkt het in CSS3? In het voorbeeld hieronder zijn er een vijftal paragraphs aangemaakt. Elke heeft een verschillende title. Aan de hand van de nieuwe selectors geef ik de elementen een achtergrondkleur. Ik geef bijvoorbeeld aan dat alle elementen waarbij de waarde van de title begint met ho een groene achtergrond krijgen. Ook geef ik aan dat alle elementen waarbij de waarde van title eindigt met een t de kleur blauw krijgt. <style> p[title^="ho"] {background: green; p[title$="t"] {background: blue; p[title*="ss"] {background: yellow; </style> <h2>attribute Selectors</h2> <div id="content"> <p title="house">title = house</p> <p title="mouse">title = mouse</p> <p title="hot">title = hot</p> <p title="boss">title = boss</p> <p title="contact">title = contact</p> </div> 37
Is het een verbetering ten opzichte van de voorgaande versie? Extra opties om elementen selecteren is altijd handig. Daarom is het een verbetering ten opzichte van de vorige versie van CSS. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.css3.info/preview/attribute-selectors/ http://reference.sitepoint.com/css/css3attributeselectors# http://dev.opera.com/articles/view/css-3-attribute-selectors/ http://grasshopperpebbles.com/ajax/yui-selector-utility-css3-attribute-selectors-and-pseudoclasses/ http://annevankesteren.nl/2003/10/power-of-css3-selectors 38
Media queries Wat is/doet het? Vandaag de dag is het erg belangrijk dat webpagina's goed weergegeven worden op allerlei verschillende apparaten. Gebruikers willen niet alleen een webpagina bekijken op hun computer maar ook op hun mobiele telefoon, geprint op papier en alle andere verschillende gadgets die er tegenwoordig op de markt zijn. Media queries moet het makkelijker gaan maken om een website te stylen voor vele verschillende apparaten. Hoe werkte het in de vorige versie van CSS? In CSS2.0 waren de media queries nog erg beperkt. Het was mogelijk om een stylesheet toe te kennen aan het soort media. Dit zag er dan bijvoorbeeld als volgt uit: <link rel="stylesheet" media="print" href="print.css"> <link rel="stylesheet" media="handheld" href="handheld.css"> <link rel="stylesheet" media="tv" href="tv.css"> Hierboven zijn er dus verschillende linkjes naar stylesheets. Daarbij wordt aangegeven voor welk media type. - Handheld: Speciaal voor mobiele apparaten(smal scherm, beperkte bandbreedte) - Print: Speciaal voor print preview mode. - TV: Speciaal voor televisie apparaten(lage resolutie, geluid beschikbaar) Hoe werkt het in CSS 3? In CSS 2 was het dus wel al mogelijk om gebruik te maken van media queries. Helaas was het nog niet mogelijk om je content te realiseren kijkend naar apparaat resolutie, portret/landscape weergave, breed/smal scherm. Dit is in CSS 3 nu wel mogelijk. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> Hierboven staat een voorbeeld van een relatie naar een stylesheet aan de hand van een media query. Op het moment dat de weergave in landscape is dan pakt hij de CSS waar de link naar staat(landscape.css). Elke keer dat de scherm mode wordt gewijzigd, kijkt de media query of er iets gewijzigd moet worden. Als voorbeeld, je verkleint een window, als deze onder een bepaald aantal pixel komt schuift het menu naar de top omdat het te smal is. Zodra je het window weer groter maakt schuift het menu weer terug naar de linker kant. Dit ziet er als volgt uit: 39
Menu links: breedte weergave Menu top: smalle weergave In de stylesheet waar desbetreffende media query naar verwijst is het ook mogelijk om er gebruik van te maken. Dit kan bijvoorbeeld als volgt: @media all and (min-width: 600px) { body { font-size: 16px; @media all and (min-width: 700px) { body { font-size: 20px; Als de breedte nu minimaal 600 pixels is dan wordt het lettertype 16px groot. Op het moment dat het minimaal 700 pixels is wordt het lettertype 20px. Doordat bij het verkleinen van het window de media query constant ververst wordt schaalt het lettertype ook mee met de content breedte. Ook is het mogelijk om het aantal kolommen in je content te bepalen aan de hand van de breedte van het scherm. Kortom met deze nieuwe mogelijkheid is het makkelijker om je webpagina beschikbaar te stellen voor een groter publiek waarbij het apparaat geen invloed heeft op de weergave. 40
Is het een verbetering ten opzichte van de voorgaande versie? De laatste jaren worden webpagina's steeds vaker bekeken met verschillende apparaten. Het is tegenwoordig de normaalste zaak dat je met een mobiele telefoon een webpagina kan bekijken. Voor webprogrammeurs wordt het door deze media queries een stuk gemakkelijker om het te programmeren voor meerdere apparaten. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://hacks.mozilla.org/2009/06/media-queries/ http://www.quirksmode.org/css/mediaqueries.html http://www.w3.org/tr/css3-mediaqueries/ http://www.alexgdesign.co.uk/articles/mobile-optimised-websites-using-css3-media-queries/ 41
Multi-column layout Wat is/doet het? Tegenwoordig worden websites bekeken met allerlei resoluties. Hierdoor is er vaak horizontaal een brede content beschikbaar. Als men een tekst daarop zet ziet dit er vaak gelijk uit als een hele grote lap tekst. Hieronder is te zien dat zo'n tekst volledig verspreid over de breedte niet optimaal leest voor een gebruiker. Uit onderzoek is ook gebleken dat 8 tot 12 woorden op één regel ideaal is voor een gebruiker. Hoe werkte het in de vorige versie van CSS? In CSS2.0 was het wel mogelijk om tekst in 2 kolommen of meer te zetten. Dit was alleen niet mogelijk met één CSS eigenschap. De tekst moet de designer zelf in 2 stukken splitsen en verdelen in twee div elementen. Dit ziet er dan als volgt uit: div#eerstekolom, div#tweedekolom { float: left; width: 350px; height: 100px; margin: 20px; <div id="eerstekolom">tekst linkerkolom</div> <div id="tweedekolom">tekst rechterkolom</div> Een nadeel van deze manier is dat de designer altijd zelf de tekst moet opsplitsen in twee gedeeltes of meer. Dit is alleen niet mogelijk als een stuk tekst dynamisch wordt ingeladen uit bijvoorbeeld een database. Hier zal de gebruiker dan weer een taal als javascript moeten gaan gebruiken om het aantal woorden te tellen en vervolgens de tekst te splitsen. Hoe werkt het in CSS 3? In CSS 3 is er dus een nieuwe CSS3 eigenschap genaamd multi-column. Deze eigenschap geeft de designer de mogelijkheid om aan te geven in hoeveel kolommen een tekst weergegeven moet worden. De browser zorgt er vervolgens voor dat de tekst mooi in kolommen wordt verdeeld. Dit ziet er in code als volgt uit: 42
div#kolom { column-count: 2; column-gap: 20px; width:600px; Naast de column-count zijn er ook nog de volgende opties: - Column-width het aangeven van de breedte van elke kolom. - Column-gap het aangeven van de ruimte tussen 2 kolommen. - Column-rule het aangeven van een border tussen 2 kolommen. Is het een verbetering ten opzichte van de voorgaande versie? Deze nieuwe eigenschap van CSS 3 zal zeker gebruikt gaan worden door vele designers. Vooral met teksten waarvan de lengte niet standaard is zal deze CSS 3 eigenschap erg veel gebruikt gaan worden voor het creëren van kolommen. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://www.quirksmode.org/css/multicolumn.html http://www.456bereastreet.com/archive/200509/css3_multicolumn_layout_considered_harmful/ http://www.alistapart.com/articles/css3multicolumn 43
Web Fonts Wat is/doet het? Tegenwoordig word er veel gebruik gemaakt van verschillende lettertypes voor allerlei doeleinden: van webpagina ontwerpen tot gewoon een document. Een web font is een lettertype, maar dan op de webpagina. Hoe werkte het in de vorige versie van CSS? In de vorige versie van CSS zat je als ontwikkelaar vast aan een aantal lettertypes, omdat in deze CSS versie de lettertypes gebruikt werden die een gebruiker geïnstalleerd hadden. Als je dan wilt dat elke gebruiker de website hetzelfde ervaren dan zul je gebruik moeten maken van een standaard lettertype zoals bijvoorbeeld: Arial, Verdana of Georgia. Als je in de vorige versie gebruik wilde maken van andere lettertypes was je afhankelijk van alternatieve methodes. Bijvoorbeeld een van de volgende drie. - sifr sifr staat voor Scalable Inman Flash Replacement en is momenteel de meest gebruikte van de drie. sifr maakt gebruik van Flash en Javascript om teksten te transformeren naar het gewenste lettertype. Als Javascript en/of Flash niet geactiveerd zijn worden de teksten in een standaard lettertype getoond. Het grote nadeel van sifr is dat het een website beduidend trager maakt, vooral bij het veelvoudig gebruik ervan. - Cufón Cufón is volgens de meeste mensen het betere alternatief voor sifr. Het grote voordeel van Cufón is dat het erg gemakkelijk werkt en aantoonbaar sneller is dan sifr. Met sifr kan je tijden bezig zijn met positioneren van teksten. Met Cufón is dat verleden tijd. Het nadeel van Cufón is dat de teksten niet selecteerbaar zijn. - Typeface.js Typeface.js is misschien wel de meest interessante van de drie. Typeface.js maakt net als Cufón gebruik van Javascript om de teksten te transformeren naar een ander lettertype. Dit script converteert de teksten niet naar afbeeldingen zoals Cufon dat doet, maar embed het lettertype. Zo kunnen de teksten nog wel geselecteerd worden, wat de toegankelijkheid ten goede komt. Hieronder zal ik een voorbeeld geven van de methode: TypeFace. Deze zou de beste optie zijn omdat dit ervoor zorgt dat de tekst selecteerbaar is. Ook maakt deze van de 3 methodes de website het minst traag. 44
<html> <head> <script src="typeface.js"></script> <script src="helvetiker_font/helvetiker_regular.typefa ce.js"></script> </head> <body> <div class="typeface-js" style="fontfamily: Helvetiker"> Deze tekst is in helvetiker.. </div> </body> </html> De nadelen van deze methode zijn dat je een apart javascript bestand moet inladen en ook voor elk lettertype een apart javascript bestand moet hebben. Ook moet je het element een klasse geven zodat deze door de javascript aangepast word. Het grote probleem van deze methode is dat het een website beduidend langzamer maakt. 250 regels tekst laad normaal binnen nog niet eens een halve seconde, maar als het door deze javascript aangepast word voor een ander lettertype kan het 5 seconden duren. Een nadeel van al deze methodes is dat er javascript en/of flash geactiveerd moet zijn om de transformatie naar een ander lettertype te laten werken. Hoe werkt het in CSS 3? In CSS3 is @font-face in leven geroepen. Dit is als het waren een selector. Hierin zet je de informatie van het lettertype(font). Je geeft hier aan hoe het lettertype heet en waar deze te downloaden is. Vervolgens kan je volgens de CSS2 manier het lettertype veranderen. @font-face{ font-family: File; src: local("file"), url(file.otf) format('opentype'); p{ font-family: File,Verdana,sans-serif; 45
Is het een verbetering ten opzichte van de voorgaande versie? Vooral omdat in de voorgaande versie gebruik moest gemaakt worden van andere programmeertalen dan CSS is het in ieder geval een verbetering. Ook wat betreft performance is deze manier een verbetering ten opzichte van de vorige methoden. Ik heb een HTML eerst volgende de oude manier omgezet naar een ander lettertype. En vervolgens heb ik de pagina op dezelfde manier getest met CSS3. Ik heb vervolgens met javascript getest hoe lang het duurt om de pagina te laden. Dit resultaat heb ik in onderstaande tabel gezet. Fonts CSS2 CSS3 Laadtijd in miliseconden 180 woorden Test 1 221 24 Test 2 221 23 Test 3 226 23 Test 4 230 24 Test 5 229 24 Gemiddeld 225,4 23,6 1008 woorden Test 1 1290 27 Test 2 1326 25 Test 3 1320 26 Test 4 1298 24 Test 5 1305 24 Gemiddeld 1307,8 25,2 Hieruit kan opgemaakt woorden dat in CSS2 het vooral van belang is hoeveel tekst je om wil zetten in een ander lettertype. Mocht een web ontwikkelaar een klein aantal woorden willen omzetten naar een ander lettertype dan is de CSS2 manier nog voldoende. Uit de test kan ik ook opmaken dat er waarschijnlijk een bepaald aantal milliseconden zeker nodig is. Dus hieruit kan opgemaakt worden dat je binnen CSS3 een nog groter aantal woorden geen beduidend grotere laadtijd meebrengt. Bij CSS2 is dit wel het geval. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 * Bronnen: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ http://www.pronamic.nl/weblog/de-toekomst-van-webfonts/ http://www.css3.info/preview/web-fonts-with-font-face/ 46
Transformations Wat is/doet het? Met de transform mogelijkheid heb je verschillende manieren om een element anders te presenteren. Je hebt hier de mogelijkheden uit: Draaien, vergroten en vervormen. Hoe werkte het in de vorige versie van CSS? In de vorige versie van CSS kon je een element wel hoogte en breedte meegeven. Maar daar hield het een heel eind op. Vervormen of verdubbelen in grootte behoren niet tot de mogelijkheden van de vorige versie van CSS. Ook hierbij moet weer terug gevallen worden op andere programmeertalen zoals javascript of flash. Er zijn wel makkelijk plugins te vinden om een element te draaien, maar veel van deze plugins kunnen maar een van deze acties en kosten een stuk meer performance. Hierbij geld ook weer hoe minder gebruik van javascript hoe beter. Ik zal hieronder een voorbeeld geven van hoe een plaatje gedraaid kan worden met de javascript library jquery en een plugin daarvoor. $(window).load(function(){ $("#test").rotateleft([angle=47]); Hier blijkt al dat het uiteindelijk weinig moeite is om een plaatje te roteren. Probleem hier is wel dat je twee javascript bestanden moet inladen waarmee dit uiteindelijk gebeurt. En voor elke ander transformatie zou er weer een extra javascript bestand ingeladen moeten worden. Ook kost javascript wederom meer performance. 47
Hoe werkt het in CSS 3? In CSS3 is het heel gemakkelijk om iets rond te draaien, vergroten of vervormen. Dit gaat allemaal met de transform eigenschap. De mogelijkheden zijn: - Translate(verplaats) - Rotate(draaien) - Scale(vergroten/verkleinen) - Matrix(vervorming met 6 waarden) - Skew(vervorming met x en y as) Bij al deze mogelijkheden geld dat het losstaat van andere elementen. Dus als er iets gedraaid word is het mogelijk dat deze over een andere element valt. #test1 { -webkit-transform: rotate(77deg); Bij bovenstaand voorbeeld is het vak 77 graden gedraaid. #test2 { -webkit-transform: scale(1.7); Bij dit voorbeeld is het vierkant 1.7 keer zo groot als zijn normale grootte. 48
#test3 { -webkit-transform: skew(22deg); Bij dit voorbeeld is het vierkant 22 graden gedraaid bij de y-as. #test4 { -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); Bij dit voorbeeld is gebruik gemaakt van de matrix. Hierbij kun je meerdere assen aangeven. #test5 { -webkit-transform: translate(50px, 50px); Bij dit voorbeeld is gebruik gemaakt van translate. Dit vierkant staat dus 50px rechts en 50px onder de plaats waar hij hoort te staan. Is het een verbetering ten opzichte van de voorgaande versie? Met deze toevoeging is er veel meer controle over een element. Je hebt zo dus veel meer opties om iets extra te geven aan de website. Het is een verbetering om meerdere redenen: - Betere performance dan javascript of flash(moet gebruikt worden bij CSS2). - Meer mogelijkheden dan in de vorige versie van CSS. - Alle mogelijkheden hebben geen effect op omliggende elementen. 49
Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://webkit.org/blog/130/css-transforms/ http://css-tricks.com/poll-results-css3-features/ http://www.the-art-of-web.com/css/css-animation/ http://tekkie.flashbit.net/css/css3-transforms-in-webkit http://tekkie.flashbit.net/tmp/css3_transform_sample.html http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ 50
Animations / Transitions Wat is/doet het? CSS3 bied gebruikers de mogelijkheid om te animeren. Dit betekent dat er eigenschappen aan elementen gegeven in een bepaalde tijd. Zo kan je iets soepel van rood naar oranje laten veranderen bijvoorbeeld. Hoe werkte het in de vorige versie van CSS? In de vorige versie van CSS was er nog geen ondersteuning voor animaties. Als je een animatie wilde maken was je afhankelijk van andere programmeertalen zoals Javascript of Flash(actionscript). Het probleem bij het gebruik van deze talen is dat het altijd performance kost. Ook is dan meer kennis vereist van de webdeveloper. Toch is op dit moment javascript een veelgebruikte manier voor animatie. Het probleem zit hierbij ook dat je de gehele animatie zelf moet programmeren en de CSS hiervoor ook was ingewikkelder is. Er zij wel libraries die een animatie functie reeds gemaakt hebben. Op de volgende pagina een voorbeeld met de library Jquery. 51
<script type="text/javascript" src="jquery.js"></script> <style> body { background-color: grey; div { height: 80px; width: 200px; border: black 1px solid; float: left; background: white; position: absolute; z-index: 0; #test2 { left: 208px; div:hover { opacity: 0.5; background: black; </style> <script> $(window).load(function(){ $("div").hover(function(){ var po = $(this).position(); $(this).animate({ "left": (po.left - 30) + "px", "top": (po.top - 30) + "px", "z-index": "1", "easein", doetrug); ) ) function doetrug() { var po = $(this).position(); $(this).animate({ "left": (po.left + 30) + "px", "top": (po.top + 30) + "px", "z-index": 0, "easein"); </script> 52
Hoe werkt het in CSS 3? div { float: left; background: white; -webkit-transition: all 500ms ease-out; div:hover { opacity: 0.5; background: black; -webkit-transform: translate(-30px, - 30px); Is het een verbetering ten opzichte van de voorgaande versie? Er word gezegd dat dit misschien niet thuis hoort binnen de css, omdat css voor het stijlen is en javascript voor de effecten en animaties. Toch ben ik van mening dat dit een uitstekende aanvulling is voor de CSS. Het is een verbetering ten opzicht van de voorgaande versie omdat de voorgaande versie nog niet deze mogelijkheid had. Het is in ieder geval beter dan de javascript versie van deze effecten. Welke browsers ondersteunen deze CSS eigenschap? Firefox 3.5 IE 8 Safari 4 Chrome 3.0 Opera 10 Bronnen: http://webkit.org/blog/138/css-animation/ http://css-tricks.com/poll-results-css3-features/ http://www.the-art-of-web.com/css/css-animation/ 53
HTML 5 Onderwerpen 54
Canvas Wat is het? Canvas is een stuk binnen een HTML pagina waarin getekend kan worden. Met behulp van Javascript kan er binnen dit gebied getekend worden. Op dit moment is de enige manier om te tekenen binnen een HTML pagina door gebruik te maken van flash. Toch zal flash voorlopig de manier zijn om dit te realiseren. 23% van alle internet gebruikers gebruikt nog steeds IE 6 als browser. Bron: http://en.wikipedia.org/wiki/template:msieshare1. Hierdoor zal de ondersteuning voor canvas bij de meeste internetters niet aanwezig zijn waardoor dit element in het begin nog niet veel gebruikt zal worden. Voorbeeld 55
Uitleg Zoals te zien in het code voorbeeld zijn er twee canvas gebieden. De een met het id canvassection en de ander met het id canvassquare. Met behulp van Javascript wordt er in deze gebieden getekend. Eerst moet het canvas element worden opgehaald. Dit gebeurd doormiddel van document.getelementbyid. Wanneer het canvas element aanwezig is kan het te tekenen gebied worden gevonden door gebruik te maken van getcontext. Vervolgens kan er doormiddel van verschillende opties iets getekend worden. In het voorbeeld wordt er een vierkant getekend met behulp van fillstyle en fillrect. fillstyle zorgt voor de kleur die het object moet krijgen en met fillrect wordt aan de hand van de meegeven afmetingen het object getekend. In dit geval dus een vierkant. 56
Datalist Wat is het? De datalist is een lijst met opties die kunnen worden ingevuld bij een input element. De datalist en de opties daarbinnen worden zelf niet getoond als zodanig getoond. Deze worden als keuzes aan de gebruiker gegeven wanneer deze op de het invoerveld klikt. Door bij het input element een attribute list met hetzelfde id als de datagrid te zetten worden deze aan elkaar gekoppeld. Voorbeeld Voorbeeld Uitleg In het voorbeeld wordt er een input element geplaatst. Dit element heeft als attribuut list met de waarde version. Dit input element zorgt ervoor dat er een textbox op de pagina getoond wordt. Doormiddel van de datalist die eronder staat kunnen er suggesties aan de gebruiker getoond worden. Door het attribuut id van de datalist dezelfde naam te geven als het input element attribuut list worden deze aan elkaar gekoppeld. Het resultaat is zoals te zie bij het voorbeeld dat er een input veld komt. Wanneer de gebruiker hierop klikt krijgt deze de suggesties te zien die zijn opgegeven in de datalist. 57
Command Wat is het? Het command element representeert een command button. Dit houdt in dat de gebruiker een actie kan uitvoeren op dit element. Dit kan een radiobutton, een checkbox of een gewone button zijn. Het command element moet genesteld zijn binnen een menu element anders wordt deze niet weergegeven. Voorbeeld Voorbeeld Uitleg Doordat het command element nog niet ondersteund wordt door de verschillende browsers is het resultaat nagebootst door gebruik te maken van HTML 4.01. De code hiervan ziet er als volgt uit: 58
Audio Hoe zit dit in HTML 4? Om in HTML 4 audio via een stream af te spelen in de browser moet er gebruik gemaakt worden van flash. Dit betekent dat er in flash een al dan niet simpele speler moet worden gemaakt met een start knop, stop knop, tijdsduur en eventueel een geluidscontrole. Met actionscript zal hier de nodige functionaliteit aan moeten worden toegevoegd. Actionscript code Hierboven is een deel van de actionscript te zien die nodig is wanneer de gebruiker op de play knop van de flash speler drukt. Echter zullen voor alle andere acties ook nog actionscript functies gemaakt moeten worden. Om vervolgens deze audio speler op de website te krijgen moet er nog wat HTML aan de pagina worden toegevoegd. 59
Wat is het? Met het audio element kan er een stream of audio bestand worden toegevoegd aan de website. Door het attribuut controls toe te voegen worden de standaard controls voor het afspelen getoond. Ook het audio element zorgt ervoor dat flash straks overbodig wordt binnen een webpagina. Het merendeel van de muziek die nu op websites is te vinden wordt afgespeeld door gebruik te maken van de flash player. Hiervoor geldt echter hetzelfde als bij het canvas element. Er is door de verschillende partijen die de browsers ontwikkelen nog geen besluit genomen over welke codecs er ondersteund moeten worden. Iedere browser heeft daarom een andere combinatie aan codecs die ondersteund worden. Bron: http://html5doctor.com/native-audio-in-the-browser/ Voorbeeld Voorbeeld Uitleg Door een audio element toe te voegen aan een HTML pagina kan er een muziekspeler worden getoond op die pagina. Deze wordt getoond zoals hierboven in het voorbeeld te zien is. Via javascript zijn de acties van de verschillende knoppen aan te passen en kan er extra functionaliteit worden toegevoegd. De tekst tussen de audio begin en eind tag in wordt getoond wanneer de browser het audio element niet ondersteund. De tekst kan ook vervangen worden door een flash object waarmee de muziek afgespeeld kan worden. 60
Het opbouwen van een pagina in HTML 5 Voor het opbouwen van een pagina zijn er in HTML 5 verschillende nieuwe tags toegevoegd. Hieronder volgt een korte beschouwing van deze tags: Header: Het header element kan gebruikt worden om de kop van de pagina aan te geven. Nav: Het nav element kan gebruikt worden om verschillende links naar andere pagina s of secties binnen de zelfde pagina te groeperen. Hierbij moet men denken aan het menu van een website waarin meerdere links zijn opgenomen. Article: Met het article element kunnen afzonderlijke secties op een pagina worden gedefinieerd. Dit kan ieder willekeurige vorm van content zijn zoals een blog post of een user comment. Article tags kunnen zelf ook weer genest worden. Section: Een sectie element kan worden gebruikt om content te groeperen. Bij een sectie is het gebruikelijk dat er een header (in de vorm van h1 t/m h6 element) aanwezig is. Soms wordt er ook een footer aan een sectie toegevoegd. Aside: Het aside element kan worden gebruikt om een deel van de pagina te definieren welke niet of nauwelijks gerelateerd hoeft te zijn aan de content eromheen. Een voorbeeld voor het gebruik van dit element is dat er bijvoorbeeld een quote uit het een artikel in het aside element wordt opgenomen. Het kan echter ook gebruikt worden op de manier zoals een sidebar nu vaak gebruikt wordt. Bijvoorbeeld voor inlog velden. Footer: De footer is een element dat meestal aan het eind van een stuk content of de pagina zelf komt. De footer wordt geassocieerd met de bovenliggende tag. In de volgende context hoort de footer dus bij de body (de hele pagina) <body> <div></div> <footer></footer> </body> 61
HTML pagina zoals gebruikelijk in HTML 4.01 Voorbeeld HTML pagina structuur in HTML 5 62
Voorbeeld 63
Uitleg Zoals te zien is in de bovenstaande voorbeelden is de semantiek voor het aangeven van de verschillende onderdelen van een pagina. Waar er voorheen gebruik werd gemaakt van een div element met een id om een deel van de pagina te identificeren kan er bij HTML 5 gebruik gemaakt worden van elementen die deze onderdelen aangeven. Door het gebruik van elementen voor het aangeven van delen van een pagina kan in de toekomst hier beter op worden ingespeeld door browsers of andere applicaties die deze pagina willen weergeven. Een voorbeeld hiervan is een screen reader. Deze kan dan duidelijk aangeven welke secties op de pagina aanwezig zijn en wat de content van zo n sectie is. De code wordt, vooral in grote pagina s, voor een ontwikkelaar duidelijker omdat ieder element bedoeld is voor een bepaald soort content. Hierdoor kan de ontwikkelaar sneller onderdelen onderscheiden. 64
Video element Voor het afspelen van een video op een webpagina geldt bij het gebruik van HTML 4 hetzelfde als voor het afspelen van audio. Er is een applicatie van derde voor nodig zoals Flash of Windows mediaplayer. Wanneer er gebruikt gemaakt gaat worden van Flash voor het afspelen van een video op een website moet er in Flash een speler gebouwd worden. Hier komt ook weer de nodige Actionscript bij kijken. Met het introduceren van het video element in HTML 5 wordt het afspelen van een video op een webpagina eenvoudiger. Het voorbeeld hieronder laat zien hoe in HTML 5 een video wordt toegevoegd aan een pagina. Door het toevoegen van het video element aan een pagina wordt er een videospeler op de pagina getoond zoals te zien is op het voorbeeld hieronder. Voorbeeld In plaats van gebruik te maken van Flash wordt er in dit geval direct een speler getoond met basis functionaliteit. De speler zit in dit geval in de browser ingebouwd zodat de gebruiker geen aparte plugin hoeft te downloaden. De speler zoals hierboven te zien is, is de standaard speler. De developer kan deze naar zijn eigen wensen aan passen door gebruik te maken van Javascript. Zo kan de functionaliteit aan aparte knoppen worden gekoppeld met Javascript. In onderstaand voorbeeld is te zien dat het video element wordt gebruikt in combinatie met losse knoppen voor het besturen van de video. 65