====== HTML5 CSS3 Kurs ======
Sammanställning av de viktigaste delarna som gicks igenom på kursen.
> Kursdatum: 2011-11-30 och 2011-12-05
> Deltagare: Jesper, Helena, Fedrico, Osvaldo. Boris halva första dagen pga sjukdom.
===== Intro=====
* HTML5
* Media querys
* CSS3
* Transformationer, och translocations
===== HTML5 =====
Saker som tillkommit i HTML5 diskuterades.
**Dokumentdeklaration, och teckentabell**
**Nya behållartaggar**
**För att få de nya behållarna att fungera i äldre IE-versioner (t.o.m. v.6)** http://code.google.com/p/html5shiv/
**För att försäkra sig om att allt tolkas som block-element även i äldre läsare**
header, nav, article, footer, address, aside, figure, figcaption { display: block; }
**Andra nya taggar som kan vara intressanta**
* **''''** markera med färg **''''**
* **''''** ordbrytning, om det behövs
* **''''** (soft hyphen/mjukt mellanslag) rekommenderas istället för '''' eftersom man då även får ett bindesträck
* **''FN''** förkortning
**Ljud och Video har blivit mycket enklare att implemtera**
* //Extra attribut för ljud//
* ''autoplay''
* ''controls''
* ''loop''
* ''preload'' (Accepterade värden här är:auto, metadata, none)
* //Extra attribut för video//
* ''autoplay''
* ''controls''
* ''width''
* ''height''
* ''loop''
* ''muted''
* ''poster'' (url till bild som visas innan inladdning)
* ''preload'' (Accepterade värden här är:auto, metadata, none)
===== Media querys =====
Vi gick igenom en hel del om media queries. Hur man kan avända dem för att applicera olika stylesheets beroende på vilken device som ska visa innehållet.
http://www.w3.org/TR/css3-mediaqueries
**Media querys med link-taggen**
**Media querys i en css-fil, eller intern css-kod**
@media screen, only screen and (min-device-width: 1281px) {
body { background-color: grey;}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1280px) and (orientation: landscape) {
body { background-color: magenta;}
}
**Media querys med import inuti en css-fil**
@import url('browsers.css') screen, only screen and (min-device-width: 1281px);
@import url('tabletsLanscape.css') only screen and (min-device-width: 481px) and (max-device-width: 1280px) and (orientation: landscape);
@import url('telefonerLanscape.css') handheld, only screen and (max-device-width: 480px) and (orientation: landscape);
@import url('tabletsPortrait.css') only screen and (min-device-width: 481px) and (max-device-width: 1280px) and (orientation: portrait);
@import url('telefonerPortrait.css') handheld, only screen and (max-device-width: 480px) and (orientation: portrait);
===== META-taggar för mobila enheter =====
Vi gick igenom ett antal meta-taggar som bra att använda på sidor anpassade för mobila enheter.
==== För Appar ====
* **apple-touch-icon**
* fyrkantig **png** som kommer att användas som starticon istället för favicon om sidan läggs på hemskärmen som en app.
* 256x256px att föredra, enheten skalar ner själv, alfa kan användas
* iOS lägger själv till avrundning av hörn och gloss. Android?
* Fungerar bara på vissa Android
* **apple-touch-icon-precomosed**
* Ingen förändring av bilden sker man lägger själv dit avrundning gloss etc.
* Fungerar på alla enheter iOS/Android
* **apple-mobile-web-app-capable**
* Appen skapas utan webbläsargränsnitt
* Fungerar bara i iOS
* **apple-touch-startup-image**
* Bilden används som laddningsskärm när appen startas
* Fungerar bara i iOS
==== Skalning av Viewport ====