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
    • &shy; (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" />

Trace: • People • HTML5 CSS3 Kurs