In-depth: HTML5 & CSS3

Transcriptie

1 In-depth: HTML5 & CSS3 Door: Peter Polman Domein: WEB Datum: 28 januari 2013

2 Inhoudsopgave Geschiedenis van HTML HTML5: Nieuwe Elementen... 5 Semantiek... 5 Media Elementen... 7 Het <canvas> element... 8 Form elementen... 8 Data- attributes... 9 HTML5: Nieuwe API s Canvas 2D API Timed Media Playback Drag & Drop HTML File API Waar is de rest? Websockets Microdata Webworkers Webmessaging RDFa Verschillen HTML 4.01, XHTML 1.0, HTML Semantiek DOCTYPE CSS3: New Elements & differences Attribute Selectors Pseudo Classes Combinators Waar is de rest? Supported Browsers Conclusie?... 20

3 Geschiedenis van HTML5 2004: WHAT Working Group wordt opgericht Onder de naam WHAT Working Group (Web Hypertext Application Technology Working Group) werd in 2004 een werkgroep opgericht om HTML5 te ontwikkelen. In deze werkgroep bevonden zich kopstukken uit de branche, afkomstig uit organisaties als Apple, the Mozilla Foundation en Opera Software Oktober: W3C start samenwerking met WHATWG W3C staakt haar ontwikkeling van XHTML en sluit zich aan bij WHATWG. Deze samenwerking geeft de ontwikkeling van HTML5 een grote impuls. 2008: Eerste versie HTML5 uitgebracht De eerste versie van HTML, ontwikkeld door Ian Hickson (Google) wordt op de markt gebracht. 2008: Firefox 3 ondersteunt HTML5 Als eerste browser neemt Firefox 3 stapjes in het ondersteunen van HTML5, niet lang daarna volgen Chrome, Safari en uiteindelijk ook Internet Explorer Januari: YouTube HTML5 video player Youtube biedt via haar eerste versie van de HTML5 video player aan April: Job s thoughts on Flash Steve Jobs (Apple) trekt middels een open brief getiteld Thoughts on Flash de stekker uit het stopcontact wat betreft het ondersteunen van Flash op Apple devices. Hiermee wordt de software markt aangezet om zich verder te verdiepen en aan te sluiten bij in de ontwikkeling van HTML Mei: Scribd goes HTML5 Online Document Sharing Site Sribd ontwikkelt een HTML5 User Interface, waarmee deze nu ook geoptimaliseerd is voor het gebruik op tablets August: The Wilderness Downtown Arcade Fire ontwikkelt in samenwerking met Google haar eerste HTML5 interactive film The Wilderness Downtown. Dit project wint de eerste prijs in de Cyber category van de Cannes Advertising awards December: Chrome Webstore opening

4 Google opent haar Chrome Webstore, waarmee non-apple web apps beschikbaar worden gesteld voor een groter publiek Maart: Disney aquires Rocket Pack. Met de overname van de Finse start-up Rocket Pack, richt Disney zich op het ontwikkelen van HTML5 games buiten de gangbare Apple webstores om July: Pandora goes HTML5 Audio listening site Pandora begint met haar overgang naar een HTML5 UI. Een ontwikkeling die positief ontvangen wordt door het publiek Augustus: Amazon goes HTML5 Amazon ontwikkeld een HTML5 versie van haar E-Book reader application. Hiermee wordt hun content via de browser te benaderen op elk soort device August: Twitter goes HTML5 Met het ontwikkelen van een HTML5 UI wordt ook twitter nu via de browser beschikbaar gesteld via de browser op mobile devices September: 34% of top100 sites gebruiken HTML5 Alexa s top100 stelt dat 34% van de top100 sites HTML5 gebruiken September: The Boston Globe starts with responsive design Krant The Boston Globe herontwerpt haar website voor mobile devices door gebruikt te maken van nieuwe CSS3 technieken en HTML5. Her begrip responsive design wordt hiermee vastgezet November: Adobe stops making Flash for mobile devices Adobe meld het publiek dat ze stopt met het geschikt maken van Flash voor mobile devices en richt zich verder op de ontwikkeling van tools voor HTML April: Flickr ontwikkelt HTML5 uploader Foto sharing wordt hiermee ook direct beschikbaar gemaakt voor crossplatform browser apps Juni: LinkedIn ontwikkelt native HTML5 app Sinds 2008 worstelt LinkedIn met het ontwikkelen van een goede mobile apps. In 2011 komt haar eerste wel prezen HTML5 app op de markt Juni: Wix.com HTML5 websites Online website builder Wix.com behaalt meer dan users die een HTML5 website hebben aangemaakt op hun platform.

5 HTML5: Nieuwe Elementen Semantiek Met semantisch elementen worden elementen bedoeld die de pagina structureren om deze vervolgens op elk niveau interpretabel te maken voor web software. Zie dit als de hiërarchische indeling van de informatie getoond middels HTML. Met het opkomen van HTML5 zijn enkele elementen uit HTML 4.01 verdwenen wegens geen of onjuist gebruik. Elementen die zich bemoeien met nonmarkup zaken als <basefont>, <font>, <center> en <big> worden niet meer ondersteund en ook <frame> en <frameset> worden, wegens hun zoekmachine onvriendelijkheid, de laan uit gestuurd. <header> Dit element wordt gebruikt als container voor introducerende content. <header> <figure><img src= logo.png alt= /></figure> <div>dit is header content</div> </header> <section> Het section element omvat een thematische groep van content binnen een document. Anders dan het article element hoeft het section element niet onafhankelijk van omliggende elementen te zijn. <section id= posts > <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> <article class= blogpost >

6 <header>dit is de heading</header> <p>een paragraaf aan content.</p> </article> </section> <article> Het element <article> geeft ondersteunende content aan (meestal geplaatst in sidebars, vandaar wellicht de naam). <article class= blogpost > <header>dit is de heading</header> <p>een paragraaf aan content.</p> <footer>geschreven door: Pietje Puk</footer> </article> <nav> Het <nav> element geeft een navigatiestructuur aan, welke we over het algmeen omvatten in een net lijstje, zodat Google dit op een juiste manier kan interpreteren. <aside> Daarnaast kennen we nog <aside> om content in te plaatsen die eigenlijk niet bij de hoofd content hoort. tkt saxion 19/3/13 10:02 Opmerking [1]: Is dit alles? <figure> Dit element bevat bijvoorbeeld afbeeldingen, diagrammen of andere figuren. Om een afbeelding weer te geven dient nog steeds wel een <img src= alt= /> gebruikt te worden. <figcaption> Het figcaption element kan gebruikt worden binnen het figure element en definieert de caption voor de afbeelding. <figure> <img src= images/image.png alt= Afbeelding van iets /> <figcaption>de caption voor deze afbeelding</figcaption> </figure> <footer> Het footer element bevat informatie met betrekking tot het element waarin het zicht bevindt. Zoals copyright informatie, algemene voorwaarden en contactgegevens. <footer>

7 <p>dit is footer content zoals details e.d.</p> </footer> <details> Het details element geeft je de mogelijkheid om detail informatie te togglen. Dat wil zeggen, tonen of verbergen. Met het nieuwe HTML5 <summary> element geef je de heading van het details element op en de overige content zal zich laten verbergen of tonen. <details> <summary>de heading</summary> <p>dit is de body</p> </details> <mark> Het mark element gedraagt zich als een gele markeerstift en highlight daarmee bepaalde stukken tekst binnen een HTML element als bijvoorbeeld de paragraph. <p>we open at <mark>10:00</mark> every morning.</p> <time> Het time element wordt gebruikt voor tijdsnotaties. Aan de voorkant zal hier weinig van zichtbaar zijn. Wel is het gebruik van dit element handig voor zoekmachines die <p>we open at <time>10:00</time> every morning.</p> <p>i have a date on <time datetime=" ">valentines day</time>.</p> Media Elementen Om een standaard te vinden in cross platform ondersteunde audio en video playback zijn de elementen <video> en <audio> in het leven geroepen. Deze elementen maken het gebruik van third-party plugins overbodig, wanneer het aankomt op het afspelen van audio en video. Steve Jobs liet in 2010 al weten dat het zou stoppen met het ondersteunen van Flash op haar mobile devices, waardoor video en audio stream partijen als Youtube en Pandora nagenoeg verplicht werden zich te richten op het ontwikkelen van HTML5 apps, waarbinnen hun content afgespeeld zou kunnen worden.

8 Het <canvas> element Het canvas element wordt gebruikt om afbeeldingen te tekenen middels script. Hiermee is het een directe concurrent van de reeds bestaande, op XML gebaseerde, SVG (Scalable Vector Image). Form elementen Ook met betrekking tot web formulieren zijn er een aantal nieuwe elementen opgedoemd. Zo hebben we tegenwoordig het element <datalist>, wat gebruik kan worden om suggesties te geven aan de gebruiker, wanneer deze een <input> element aan het invullen is. Waar eerder AJAX oplossingen nodig waren om een functionaliteit als deze mogelijk te maken, kan dit nu met enkele regels HTML opgelost worden. Keygen Een andere opvaller om de rekenkracht naar de kant van de client te halen is <keygen>, met keygen hoeven we geen PHP meer te schrijven om unieke hashes uit te rekenen. Ideaal aan dit element is dat het zowel lokaal als op de server een hash achterlaat. Zo kunnen we vrij eenvoudig users identificeren zonder ze hiervoor te moeten laten registreren of IP adressen op te slaan. Data validatie Ook kunnen input velden met behulp van HTML5 patterns eenvoudiger gevalideerd worden. <input type="text" id="partnumber" pattern="[a-z]{3[0-9]{4" /> tkt saxion 19/3/13 10:05 Opmerking [2]: Er is veel meer toegevoegd op het gebied van forms. Ik zie dit hier niet terug. Door enkel het required attribute toe te voegen aan het input element wordt de gebruiker verplicht om hier een waarde in te vullen, alvorens het formulier gesubmit kan worden. <input type="number" id="qty" required /> Met de attributes min, max en step kunnen waarden gecontroleerd worden <input type="number" id="qty" min="0" max="100" step="10" /> Met de placeholder attribute kan een placeholder opgegeven worden voor een input element. Dat wil zeggen dat er een description achtige tekst in het veld wordt getoond, welke verdwijnt op het moment dat de user er een waarde invult.

9 Data- attributes Vaak werden attributes als ID, name en rel gebruikt om data op te slaan die enkel werd gebruikt door javascript. Dit werd niet als efficiënte en nette oplossing gezien en daarom is met het ontstaan van HTML5 nu ook het data- attribute in het leven geroepen. data-<suffix> kan worden gebruikt een bepaalde value aan een element toe te kunnen, wat semantisch als juist wordt bevonden en vervolgens door Javascript netjes uitgelezen kan worden.

10 HTML5: Nieuwe API s Canvas 2D API Het element canvas is reeds genoemd, maar de canvas API opent nog een hele sloot aan nieuwe functies. Zo zijn er voor gedefinieerde functies om allerlei shapes te scripten en kan script natuurlijk ook bitmap data uitlezen en herproduceren. <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getelementbyid("canvas"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); tkt saxion 19/3/13 10:07 Opmerking [3]: Voorbeeld? ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> Timed Media Playback Ook voor <audio> en <video> zijn nieuwe functies in het leven geroepen. Zo kan een stream gepauseerd worden, afgespeeld worden of kan er op andere manier invloed worden uitgeoefend op de timeline van een track. Tevens bestaat de mogelijkheid om middels HTML5 complete afspeellijsten van verschillende tracks in te laden. Drag & Drop Door een element de methode draggable= true mee te geven kan de gebruiker het element verslepen en elders weer droppen. De API maakt het mogelijk deze

11 elementen uit te lezen en hier andere informatie over op te vragen. Ook is er een set aan events, waarmee bepaalde acties getriggerd kunnen worden. <!DOCTYPE HTML> <html> <head> <script> function allowdrop(e) { e.preventdefault(); tkt saxion 19/3/13 10:07 Opmerking [4]: Voorbeeld? function drag(e) { e.datatransfer.setdata("text", ev.target.id); function drop(e) { e.preventdefault(); var data = e.datatransfer.getdata("text"); e.target.appendchild(document.getelementbyid(data)); </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> HTML File API De HTML file API maakt het initiëren van lokale bestanden mogelijk middels HTML om deze vervolgens binnen het script te kunnen gebruiken. Een groot verschil met PHP niet per se op de server opgeslagen hoeven worden, maar direct gebruikt kunnen worden en client-side worden opgeslagen. Dit heet App storage en werkt met een manifest bestand. Dit is een tijdelijk bestand wat in de browsercache wordt opgeslagen en zodoende middels JavaScript te manipuleren is. tkt saxion 19/3/13 10:08 Opmerking [5]: Dit heet App storage en werkt met een manifest bestand. Het HTML5 element input van het type file kan nu ook een attribute genaamd multiple bevatten. Hiermee kunnen meerdere bestanden in de file dialog

12 geselecteerd worden en deze objecten worden vervolgens in de FileList interface opgeslagen. Vervolgens zijn ze via JavaScript te benaderen en kunnen properties als size en last modified date opgevraagd worden. Waar is de rest? Websockets Websockets stellen een socket verbinding op tussen de client/browser en de server. Dat wil zeggen dat er een constante verbinding is opgezet, waarbij beiden partijen zowel kunnen zenden als ontvangen. tkt saxion 19/3/13 10:09 Opmerking [6]: Websockets, Microdata, Webworkers, Webmessaging, RDFa Een socketverbinding wort als volgt geiniitieerd: var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']); Websockets maken gebruik van een ander URL scheme dan het gebruikelijke HTTP. In dit voorbeeld hanteren we ws://. Een alternatief zou wss (web socket secure) kunnen zijn. Microdata Microdata vocabularies worden gebruikt om de betekenis van woorden in de markup van een HTML pagina te duiden. De semantiek van de content. Dit kan handig zijn wanneer een machine het document moet interpreteren. Zoals wanneer zoekmachines website content indexeren. Microdata wordt toegepast als attribute op bestaande elementen. Het attribute definieert de naam en het element zelf omsluit de waarde. Er zijn standaard vocabularies beschikbaar, zoals die op schema.org. Dit is een organisatie die zich bezighoud met het opstellen van standaard microdata vocabularies. <section itemscope itemtype= > <p>mijn naam is <span itemprop= givenname >Peter</span> <span itemprop= familyname >Polman</span> en ik ben geboren op <span itemprop= birthdate >16 oktober 1988</span> jaar oud.</p> </section>

13 Webworkers JavaScript is een single thread language. Dat wil zeggen dat het script maar 1 ding tegelijkertijd kan uitvoeren. Met behulp van webworkers kun je meerdere uit te voeren threads aanmaken en deze synchroon laten uitvoeren. De syntax hiervoor luidt als volgt: var worker = new Worker('task.js'); Nadat de worker is gedefinieerd start je hem met het volgende statement: worker.postmessage(); Webmessaging Web messaging stelt documenten in staat om data uit te wisselen tussen bijvoorbeeld verschillende vensters of tussen iframes. Aangezien er geen gebruik van POST of GET methods wordt gebruikt is deze oplossing een stuk minder vatbaar voor cross-site scripting (XSS). Ik vroeg mij af of je hier dan bijvoorbeeld interactieve banners mee kon maken die reageren op de positie van de cursor ten opzichte van de banner in de pagina (in plaats van binnen de iframe). Het is me uiteindelijk alleen gelukt om enkel een string door te geven via de postmessage method. Maar in principe zou je een object wat als string verzonden is naderhand natuurlijk weer kunnen splitten om er losse variablen van de maken. <html> <head> <script> window.onload = function() { var receiver = document.getelementbyid('receiver').contentwindow; function sendmessage(e) { var posx = e.clientx; var posy = e.clienty; var pos = posx+","+posy; receiver.postmessage(pos, ' window.onmousemove = sendmessage; </script>

14 </head> <body> <iframe id="receiver" src=" ></iframe> </body> </html> Het voglende bestand wordt door de iframe ingeladen en draagt een functie met zich mee die de e.data property van het verzonden event kan ontvangen en weergeven. De e.origin property bevat de meegegeven bron van sender.html en checkt of deze overeenkomt met het domein waarop de scripts zich bevinden. Op deze manier is dus de security ingebouwd. <html> <head> </head> <body> <div id="message"></div> <script> window.onload = function(){ var element = document.getelementbyid('message'); function receivemessage(e){ if(e.origin!== " { return ; element.innerhtml = "Mouse X,Y: " + e.data; window.addeventlistener('message',receivemessage); </script> </body> </html> RDFa Het Resource Description Framework in Attributes stelt de ontwikkelaar in staat om metadata attributes toe te voegen aan XHTML, HTML en XML elementen. Eerder in deze rapportage behandelden we het begrip MicroData al en dit vertoont een hoop vergelijkenissen met RDFa. Beiden brengen een nieuwe laag metadata aan op de bestaande HTML elementen en de values die ze bevatten.

15 De oorsprong van deze twee verschillende features zit hem in de chronolische volgorde qua ontwikkeling. RDFa werd al ontwikkeld in 2004 en Microdata kwam pas een hele poos daarna. Microdata werd gebaseerd op het originele RDFa design, maar koos er bewust voor om niet backwards compatible te zijn met RDFa zelf. Als antwoord daarop is RDFa Lite ontwikkeld, wat developers uiteindelijk wél in staat stelt om de Microdata tags in hun documenten te wijzigen in RDFa Lite tags. Microdata 1.0 RDFa Lite 1.1 Purpose itemid resource Used to identify the exact thing that is being described using a URL, such as a specific person, event, or place. itemprop property Used to identify a property of the thing being described, such as a name, date, or location. itemscope not needed Used to signal that a new thing is being described. itemtype typeof Used to identify the type of thing being described, such as a person, event, or place. itemref not needed Used to copy-paste a piece of data and associate it with multiple things. not supported not supported vocab prefix Used to specify a default vocabulary that contains terms that are used by markup. Used to mix different vocabularies in the same document, like ones provided by Facebook, Google, and open source projects. Bron:

16 Verschillen HTML 4.01, XHTML 1.0, HTML 5 Semantiek Qua elementen, methodes en API s omvangt HTML5 natuurlijk een heel scala aan nieuwe mogelijkheden die in HTML 4.01 of XHTML 1.0 nog niet te vinden waren. Ik vermoed echter dat er bij deze competentie geduid wordt op een select aantal verschillen die vooral gericht zijn op de werkwijze van ontwikkelaars. Natuurlijk tracht iedere ontwikkelaar zijn script zo netjes mogelijk te schrijven om niet alleen een goede input te leveren op het semantische web, maar ook zijn code goed leesbaar te houden voor bijvoorbeeld collega ontwikkelaars. HIER MOET NOG EEN TABEL Semantiek Video audio Canvas Input tkt saxion 19/3/13 10:10 Opmerking [7]: Wat is nou het verschil tussen deze drie HTML versies? DOCTYPE Enkele specifieke voorbeelden van verschillen die belangrijk zijn voor de browser om vervolgens een pagina op de juiste manier te kunnen renderen, zitten hem in het DOCTYPE. De declaratie aan het begin van het HTML document, waarin aan de browser wordt verteld hoe deze jouw code moet gaan interpreteren. Welke taal je spreekt. Wanneer dit verkeerd wordt aangeduid kan het zijn dat bepaalde elementen niet bruikbaar zijn, omdat deze in de gedefinieerde DOCTYPE niet beschikbaar zijn. Strict (voorkeur) Transitional Frameset HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Strict (voorkeur) XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

17 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " HTML 5 <!DOCTYPE html> Waar eerder altijd een onderscheid werd gemaakt in interpretatie van strict/transitional of frameset varianten van HTML. Is in HTML 5 al dit gedoe achterwege gelaten en werken we te allen tijde met het doctype <!DOCTYPE html>. Heel fijn. Iets wat eigenlijk al sinds HTML 4.01 al niet meer mag is het afbreken van elementen zonder geldige afsluiting. Er zijn een aantal elementen die niet met een tag (</element>) afgesloten hoeven worden, zoals bijvoorbeeld <br> en <img>. Deze dienen een forward slash aan het eind van hun start tag te hebben, <br /> en <img src= alt= />. Ook wordt sinds XHTML 1.0 alle markup in lowercase geschreven en dienen attribute values altijd omsloten te worden met dubbele aanhalingstekens (quotes: ). Dit wil nog wel eens problemen veroorzaken wanneer de HTML wordt geprint door PHP functies die dikwijls ook een sloot aan aanhalingstekens met zich meenemen. tkt saxion 19/3/13 10:12 Opmerking [8]: Dit mag juist wel in HTML4.01 maar niet in XHTML. Dit zou ik verwachten onder het kopje Netjes Schrijven. Conclusie

18 CSS3: New Elements & differences Attribute Selectors Deze selectors zijn patronen, welke worden gebruikt om bepaalde delen binnen de document tree of een HTML element te initiëren. Waar eerder brokken Javascript gebruikt moesten worden om delen binnen de content van HTML elementen te herkennen, zijn nu slimme CSS selectors in het leven geroepen om styling in dit soort gevallen mogelijk te maken. In CSS3 zijn er wat meer variaties op de bestaande attribute selectors toegevoegd. Hiermee kunnen we met behulp van verschillende operators flexibel omgaan met de values van de verschillende attributes op een element. tkt saxion 19/3/13 10:13 Opmerking [9]: Voorbeelden graag a[href^=" { declarations Bovenstaande selector zoekt met behulp van de operator ^= binnen de value van het attribute href naar een string beginnend met De operator ~= gedraagt zich vergelijkbaar, maar de value dient dan precies overeen te komen met de opgegeven value. img[src$=".png"] { declarations Bovenstaande selector zoekt met behulp van de operator $= binnen het attribute src naar een value die eindigt met.png div[id*="foo"] { declarations Bovenstaande selector zoekt met behulp van de operator *= binnen het attribute id naar een value die de string foo bevat. De operator = gedraagt zich vergelijkbaar, maar de value dient dan precies overeen te komen met de opgegeven waarde.

19 Pseudo Classes Pseudo classes worden gebruikt om bepaalde elementen of states binnen een pagina of een element te kunnen herkennen en stylen. Zo kenden we voor CSS3 de pseudo classes :link, :visited, :hover en :active al. Waarmee <a> en haar verschillende states gestyled konden worden. In CSS2 hadden we zelfs de class :first-child al tot onze beschikking. Toch werd vaak door Javascript een class meegegeven aan het eerste (en ook laatste) element, daar :last-child nog niet beschikbaar was. Met de nieuwe :nth-child(n) kunnen we nu zelfs een specifiek element uit bijvorbeeld een UL opvragen. Daarnaast zijn er een aantal specifieke pseudo elements toegevoegd in CSS3, zoals bijvoorbeeld ::first-line, ::first-letter, ::before en ::after. Deze nieuwe pseudo elements worden met :: geschreven, daar zij styling toepassen op een specifiek gedeelte van een html element. Combinators Combinators hebben alles te maken met hiërarchie. Binnen een HTML document noemen we dit de document tree en deze wordt gezien als de boom van informatie met verschillende takken aan uitwerkingen. Oftewel; branches met daaraan nog weer meer branches. We gebruiken combinators om bijvoorbeeld een ID of class te aan te geven (# of.) binnen het stylesheet. Hiervoor zijn ook wildcards beschikbaar (*) en middels een + kun je een sibling van een element definiëren. Een nieuwe combinator in CSS3 is de ~. Deze wordt gebruikt om sibling elements van een bepaald element binnen het document eenzelfde style mee te geven. ( p~h1{ <style> ) Waar is de rest? tkt saxion 19/3/13 10:18 Opmerking [10]: CSS3 Styling, Transform, animations and transitions, Media Queries

20 Supported Browsers Ik ben van mening dat het kopiëren van een browser support table niet heel veel toevoegt, daar deze binnen een paar seconden up-to-date en compleet op het internet te vinden zijn. Daarom gebruik ik deze pagina om een klein pleidooi te houden met betrekking tot de support die webdevelopers zouden moeten leveren om hun high-end websites ook in verouderde browsers op een nette manier weer te geven. Iedere front-ender wordt er dagelijks mee geconfronteerd. De diversiteit van browsers en hun eigen interpretatie van het Document Object Model. Concepters en designers ontwikkelen prachtige ideeën en vervolgens mogen de developers gaan uitzoeken of dit van mogelijk is. Over het algemeen zal het antwoord luiden: natuurlijk!. In de nieuwste browsers kunnen we in principe alles tevoorschijn toveren wat ons hartje begeert. Feit blijft echter dat we rekening moeten blijven houden met gebruikers die hun browsers niet updaten of overheden en andere instanties die gebonden zijn aan bepaalde versies. Daarom zal er vaak ingeleverd moeten worden op pracht en praal of worden er talloze uitzonderingen geschreven om de websites toch enigszins bruikbaar te houden. tkt saxion 19/3/13 10:15 Opmerking [11]: Dit lijkt mij wat overdreven. Noem eens een paar beperking van HTML5 en CSS3? Internet Explorer, don t be a bitch en zorg dat je voortaan een beetje meekomt met de ontwikkeling die Chrome en Firefox doormaken. De evolutie van het web zal hier mee versneld worden en de ontwikkelaars hebben het vandaag de dag al moeilijk genoeg met al die verschillende devices die ondersteund dienen te worden. </rant> tkt saxion 19/3/13 10:20 Opmerking [12]: Ik mis hier iets over audio/video support, en progressive enhanchement. Conclusie? tkt saxion 19/3/13 10:22 Opmerking [13]: Graag een conclusie over de twee nieuwe standaarden (plus en minpunten) en een reflectie op het eigen werk.