Reset stylesheet, Game Maken, Les 3.

Games Maken in HTML5 , les 3

Alles is in beweging.

Het belangrijkste om te weten over ontwikkelen voor internet is: Alles is continu in beweging.
Er werken vele mensen aan het internet en ze hebben vele meningen. Het gevolg is dat we nu bij HTML5 zijn, CSS 3 en javascript 1.8.5. De vorige versies worden deels ondersteund, deels niet.

Ik probeer me hier te beperken tot dingen die universeel waar zijn, maar helaas kom je er dan niet.
Volgend jaar is een hoop van wat ik hier zeg misschien niet meer waar. DUS:

Kijk naar de datum van posts (zoals deze) die praten over techniek, kijk naar de datum van de bronnen en doe zelf OOK onderzoek.

Het idee is niet, dat je hier leert hoe het moet, maar dat je leert hoe je het moet uitzoeken.

Basis CSS en Cross Browser

Er zijn (helaas) kleine verschillen tussen de verschillende browsers (Chrome, Internet Explorer, Safari etc) Dezelfde pagina ziet er vaak net iets anders uit. Dit komt (voornamelijk) omdat de basis instellingen van de style (css) voor iedere browser anders is.
Voor internet pagina's maakt dat niet echt uit, maar voor games is het wel belangrijk..

Om alle (moderne) browsers dezelfde grpahics te laten zien hebben we wat basis instellingen nodig.
Dit wordt wel een 'RESET STYLESHEET' genoemd.
De meningen over hoe wijs dit is zijn verdeeld, maar het heeft absoluut zijn voordelen.

In het CSS vak type je:

html, body, div, iframe,
img, canvas, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
body{
 line-height: 1;
    font-family: sans-serif;
}
/***********EINDE RESET******************/
#tekst1{
    background-color: rgb(255,0,0);
}

Dit is een uitgeklede versie van een reset stylesheet, dat alleen gebruikt wat we nodig hebben.
JSFiddle : http://jsfiddle.net/Lt6LZ/2/

EXPERIMENT: Wat gebeurd er als je op run drukt?
De marges verdwijnen ten opzichte van de vorige fiddle. Dit is belangrijk als we dingen precies willen plaatsen in plaats van ongeveer. (En dat wilen we natuurlijk in een spel)
Verder zou er hetzelfde moeten gebeuren. Kijk in een andere browser naar het vorige experiment en dan naar deze. Als je in dit laatste experiment nog onderlinge verschillen ziet, dan faalt de reset-stylesheet.

In de volgende les gaan we een simpel physics model maken.
NAAR LES 4
Beginnen bij les 1: http://games-maken.blogspot.nl/2014/06/games-maken-les-1.html

Links voor zelfstudie:
Verschillende meningen over reset-stylesheets.

CSS reset styelsheet:

TEGEN:
   http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/

VOOR:

   http://meyerweb.com/eric/tools/css/reset/