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

<!doctype html>
<meta charset=”UTF-8”>

Nya behållartaggar

<section> <header> <footer> <nav> <article> <aside> <figure> <figcaption>

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/

<!--[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif ]-->

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

<mark> markera med färg </mark>
<wbr> ordbrytning, om det behövs
-  (soft hyphen/mjukt mellanslag) rekommenderas istället för <wbr> eftersom man då även får ett bindesträck
<abbr title=”Förenta Nationerna”>FN</abbr> förkortning

Ljud och Video har blivit mycket enklare att implemtera

<audio controls=”controls”>
  <source src=”song.ogg” type=”audio/ogg” />
  <source src=”song.mp3” type=”audio/mp3” />
  Your browser does not support the audio tag.
</audio>
<video width=”320” height=”240” controls=”controls”>
  <source src=”movie.mp4” type=”video/mp4” />
  <source src=”movie.ogg” type=”video/ogg” />
  Your browser does not support the video tag.
</video>

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

<link rel="stylesheet" media="screen, only screen and (min-device-width: 1281px)" type="text/css" href="browsers.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1280px) and (orientation: landscape)" type="text/css" href="tabletsLanscape.css" />
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 480px) and (orientation: landscape)" type="text/css" href="telefonerLanscape.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1280px) and (orientation: portrait)" type="text/css" href="tabletsPortrait.css" />
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 480px) and (orientation: portrait)" type="text/css" href="telefonerPortrait.css" />

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

<!-- "Favicon" för Android/iOS -->
<meta name="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="apple-touch-icon-precomosed" href="apple-touch-icon-precomposed.png" />
<!-- Fungerar bara i iOS (iPone/iPad) -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-startup-image" href="startskarm.png" />

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

<!-- Låser skalning -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi" />