HTML5 & CSS3

Was ist neu, wie und wann können wir was nutzen?

Norman Paschke
das MedienKombinat GmbH – 2012

Folien unter: www.normansblog.de/html5-css3/

Was versteht ihr unter HTML5?

Brainstorming - Ich will Buzzwords hören!

neue Tags
Video+Audio+canvas
Drag&Drop
Microdata
Offline Storage
CSS3
JavaScript
Geolocation
Formulare
Mobile Web
WebGL
Responsive Design

Demos auf www.html5demos.com

Neuer Doctype

`<!DOCTYPE html>`

Triggert in jedem Browser den Standards-Mode
(Gegenteil vom Quirks-Mode)

Der erste Doctype, den man sich merken kann!

Neue Tags

Legende: Struktur | Inhalt | Multimedia

<header>
<hgroup>
<nav>
<article>
<section>
<aside>
<footer>
<time>
<figure>
<figcaption>
<datalist>
<canvas>
<video>
<audio>

... und noch einige andere (» Übersicht)

Video (ganz ohne Plugin - OMG!)

<video src="random_video.webm" width="xxx" height="xxx" 
poster="url/to/preview_image.jpg" controls preload></video>

Source: Alex Faaborg

HTML5 Forms

Neue Typen: tel, number, range, time, date etc.

Neue Attribute: pattern, min, max, accept, multiple etc.

HTML5 neue Input-Typen auf mobilen Geräten

type="tel"

type="date"

Selbst testen unter: bit.ly/wLc3ef

Kompatibilität zu älteren Browsern

Problematisch im IE aber es gibt eine Lösung: html5shiv

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

Einfach in den <head> laden!
Danach kann man die neuen Tags benutzen und stylen.

Viel Aufwand » Beschleunigung durch Template:
HTML5 Boilerplate

TYPO3 & HTML5

TYPO3 und HTML5 - verträgt sich das?

TYPO3 & HTML5

TypoScript und die Extension html5meta_t3lib_pagerenderer

config {
	doctype = html5
	htmlTag_setParams = lang="de" dir="ltr"
	xhtml_cleaning = all
	xmlprologue = none
}

<!DOCTYPE html>
<html lang="de" dir="ltr">
    <head>
		<meta charset="utf-8"/>
		...
    </head>
    <body>...</body>
</html>

TemplaVoila! kennt HTML5 Tags, es lässt sich also alles damit mappen.

Was ist neu?

Transparenz (RGBa, HSLa)
Media Queries
Columns
Pseudoklassen
Font-Face
Box-Shadow
Background-Gradients
Multiple Backgrounds
Text-Shadow
Border-Radius
Border-Image
Transitions
Transforms
Animations

Beispiele: normansblog.de

Viele Transition/Animation-Demos: tympanus.net/codrops

Text-Shadow

text-shadow:5px 5px 2px grey

foo

text-shadow:-5px -5px 2px orange,
			5px 5px 2px deepskyblue

bar

Border-Radius

border-radius:20px 40px

border-radius:100px

Box-Shadow

box-shadow:10px 10px 10px grey

box-shadow:0 0 10px red inset

Transition

transition:all 1s ease

Box

Transform

transform:rotate(45deg)

Box

Background-Gradients

background:linear-gradient(left,red,orange,yellow,green,blue,purple)

Font-Face

@font-face {
  font-family:'Lobster';
  src:local('Lobster'), url('lobster.woff') format('woff');
}

This is a nice Lobster font!

Siehe auch Google Web Fonts und Bullet Proof Font-Face.

Neue Selektoren, Pseudoklassen

Muster	Bedeutung
[foo^=bar]	"foo"-Attribut muss mit "bar" beginnen
[foo$=bar]	"foo"-Attribut muss auf "bar" enden
[foo*=bar]	"foo"-Attribut muss "bar" enthalten
:target	Ziel des angeklickten Verweises ist (Beispiel)
:not(foo)	Selektor "foo" darf nicht zutreffen
:last-child	das letzte Kind des Elternelementes
:nth-child(n)	das n-te Kind des Elternelementes (Beispiel)
:empty	Element darf keine Kindelemente haben

Vendor Prefixes

Firefox

-moz-

Safari	+	Chrome
-webkit-

IE ≥ 9

-ms-

Opera

-o-

.transition {
  -moz-transition:    border-color linear 1s; /*Firefox*/
  -webkit-transition: border-color linear 1s; /*Chrome, Safari*/
  -ms-transition:     border-color linear 1s; /*IE*/
  -o-transition:      border-color linear 1s; /*Opera*/
  transition:         border-color linear 1s; /*Standard*/
}

Müssen Websites in jedem Browser genau gleich aussehen?
html5please.us im Auge behalten!

Vor- und Nachteile, Probleme?

The Good	The Bad	The Ugly
kurzer Doctype neue semantische Tags Videos und Musik ohne Plugins abspielen Canvas statt Flash intelligente Formulare schnellere Ladezeiten Design im Browser alle erdenklichen Schriftarten verfügbar	Fallbacks für IE6 – 8 Implementierung von Browser zu Browser evtl. unterschiedlich Vendor Prefixes Standards sind im ständigen Wandel	Codec-Krieg: WebM vs. H.264 fast jede Schreibweise ist valide

Danke fürs Zuhören!

Folien unter: normansblog.de/html5-css3/
Codegrundlage von Google

Fragen bitte an..

Google+: normansblog.de/+
Twitter: @normansblog
E-Mail: norman.paschke@das-medienkombinat.de

☺
Viel Spaß damit!