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

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

Beispiel

HTML5 Spec: dev.w3.org/html5/spec/

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

Validierung - Placeholder - Datalist

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"
tel
type="date"
date

Selbst testen!

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

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.

TYPO3 & HTML5

Kein Problem also ;)

Was ist neu?

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
:targetZiel des angeklickten Verweises ist (Beispiel)
:not(foo)Selektor "foo" darf nicht zutreffen
:last-childdas letzte Kind des Elternelementes
:nth-child(n)das n-te Kind des Elternelementes (Beispiel)
:emptyElement darf keine Kindelemente haben

Vendor Prefixes

Firefox
Firefox

-moz-

Safari
Safari

+

Chrome
Chrome

-webkit-

Internet Explorer
IE ≥ 9

-ms-

Opera
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 GoodThe BadThe 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!

Fragen bitte an..


Viel Spaß damit!

CC0 - normansblog.de