


**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 ====