html5 und css3 - was jetzt schon möglich ist

41
HTML5 und CSS3: Der zukünftige Webstandard und was jetzt schon möglich ist. Eine Einführung webgrrls convention net + work am 19. Mail 2012 in München

Upload: renate-hermanns

Post on 27-Jun-2015

1.137 views

Category:

Documents


4 download

DESCRIPTION

Einführung in HTML5 und CSS3: Was ändert sich und in welchen Browsern klappt die Darstellung bereits jetzt.

TRANSCRIPT

Page 1: HTML5 und CSS3 - was jetzt schon möglich ist

HTML5 und CSS3: Der zukünftige Webstandard

und was jetzt schon möglich ist.

Eine Einführung

webgrrls convention net + work am 19. Mail 2012 in München

Page 2: HTML5 und CSS3 - was jetzt schon möglich ist

HTML CSS JS HTML5

Page 3: HTML5 und CSS3 - was jetzt schon möglich ist

W3CWorld Wide Web Consortium

Richtlinien für HTML 4.01 und XHTML (1.0, 1.1 + 2)

Web Hypertext Application Technology Working Group

Zusammenschluss von Mitarbeitern bei Apple, der Mozilla Foundation und Opera.

WHATWG

Page 4: HTML5 und CSS3 - was jetzt schon möglich ist

Was ist an HTML5 anders?

Semantische Struktur

Audio und Video ohne Plugin

Neue Formulartypen mit Eingabeunterstützung

Inline SVG und MathML (XML-Elemente)

Page 5: HTML5 und CSS3 - was jetzt schon möglich ist

Semantische Struktur<header>

<footer>

<section>

<nav> <aside><article>

Page 6: HTML5 und CSS3 - was jetzt schon möglich ist

Kopfbereich

<header><hgroup>

<h1>Hauptüberschrift</h1><h2>Unterzeile</h2></hgroup></header>

Page 7: HTML5 und CSS3 - was jetzt schon möglich ist

Hauptnavigation

<nav>

<ul><li>Link1</li><li>Link2</li>

</ul></nav>

Page 8: HTML5 und CSS3 - was jetzt schon möglich ist

Hauptinhalt

<section><article>

<h1 (h3)>Eine Überschrift</h1><p>Der Text</p><aside>

<p>Datum,

Autor etc.</p>

</aside></article></section>

Page 9: HTML5 und CSS3 - was jetzt schon möglich ist

Zusatzinformation

<aside><h1 (h3)>Sidebar</h1><section>

<h1 (h4)>Tagcloud</h1><p>Tags Tags Tags</p></section></aside>

zum Hauptinhalt

Page 10: HTML5 und CSS3 - was jetzt schon möglich ist

Fußbereich

<footer><p>Footer-Inhalte</p><address>Kontaktinformationen</address>

</footer>

Page 11: HTML5 und CSS3 - was jetzt schon möglich ist

HTML5-StrukturelementeImplementierung in modernen Browsern

Typ Webkit 5.3(Safari 5, Chrome 7)

Gecko 2(Firefox 4+)

Presto 2.7 (Opera 10+)

Trident 5.0(IE9+)

section nav article aside hgroup header footer

Page 12: HTML5 und CSS3 - was jetzt schon möglich ist

Audio und Video

Native Unterstützung, d.h. Videos können ohne Plugin im Browser abgespielt werden.

Unterstütztes Video-Format je nach Browser unterschiedlich.

Für ältere Browser benötigt man weiterhin ein Flash als Fallback.

Page 13: HTML5 und CSS3 - was jetzt schon möglich ist

Audio und Video<video checked="true" controls="controls"

preload="none" poster="poster.png"> <source src="big_buck_bunny_480p_stereo.ogg" type="video/ogg"><source src="BigBuckBunny_320x180.mp4"

type="video/mp4"> </video>

Das <video>-Tag kann mehrere Quellen auf-nehmen.

Das <audio>-Tag ebenfalls.

Page 14: HTML5 und CSS3 - was jetzt schon möglich ist

Audio und Video

Implementierung in modernen Browsern

Typ Webkit 5.3(Safari 5, Chrome 17)

Gecko 1.9.1(Firefox 3.6+)

Presto 2.5 (Opera ~10+)

Trident 5.0(IE9+)

video audio source

(Safari >= 5.1)

Page 15: HTML5 und CSS3 - was jetzt schon möglich ist

Formulare

Neue Typen für das <input>-Tag,

Neue Attribute, z.B.

zur Validierung der Eingabe von Mail-Adresse oder URLs,für Pflichtfelder,oder als Hinweistext.

Page 16: HTML5 und CSS3 - was jetzt schon möglich ist

Formulare<input type=“text” name=“usrname”

required=“required”><input type=“email” name=“usremail“

placehoder=“Ihre Mailadresse”><input type="text" name=“plz" pattern="[0-9]{5}" title=“Postleitzahl 5 Ziffern">

Für Validierung, Pflichtfelder und einige Vorgaben kann man auf Javascript verzichten.

Page 17: HTML5 und CSS3 - was jetzt schon möglich ist

Formulareneue <input>-Typen (Beispiele)

Type Webkit (Safari, Chrome)

Gecko (Firefox)

Presto (Opera)

Trident 5.0(IE9+)

datalist url

(nicht in Safari)

email (nicht in Safari)

Datumdatetime, date, month, week, time, datetime-local

Page 18: HTML5 und CSS3 - was jetzt schon möglich ist

Formulareneue <input>-Attribute (Beispiele)

Attribute Webkit (Safari, Chrome)

Gecko (Firefox)

Presto (Opera)

Trident 5.0(IE9+)

placeholder required

(nicht in Safari)

pattern (nicht in Safari)

autofocus

Page 19: HTML5 und CSS3 - was jetzt schon möglich ist

Grafik

Canvas

Umgebung für die User-Eingabe von Bitmap-Grafiken,

Aktionen nur mit Unterstützung durch z.B. Javascript möglich

SVG – Scalable Vector Grafic

ist ein XML-Konstrukt,das bereits seit Jahren existiert,wird in HTML5 nativ unterstützt undbereits in modernen Browsern angezeigt.

Page 20: HTML5 und CSS3 - was jetzt schon möglich ist

Canvas + SVG

Implementierung in modernen Browsern

Typ Webkit 5.3(Safari 5, Chrome 17)

Gecko 1.9.1(Firefox 3.6+)

Presto 2.5 (Opera 11.6+)

Trident 5.0(IE9+)

Canvas * (teilweise) (teilweise) (teilweise) (teilweise)

SVG (teilweise) (teilweise) (teilweise) (teilweise)

* z.B. wird WebGL (3D) nur in Chrome ab Version 18 vollständig unterstützt

Page 21: HTML5 und CSS3 - was jetzt schon möglich ist

Javascript mit HTML5

Fallback für ältere Browser das Javascript von Remy Sharp:

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

Muss im <head>-Bereich der Seite stehen!

Page 22: HTML5 und CSS3 - was jetzt schon möglich ist

Neuigkeiten bei CSS3Neue Design-Möglichkeiten

CSS Media-Queries für ein „Responsive“ Layout

Webfonts einbinden mit @font-face

Page 23: HTML5 und CSS3 - was jetzt schon möglich ist

Abgerundete Ecken (border-radius)

Bisher:

Fixiertes Layout: 1 Hintergrundbild (1 Div) Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs)

-moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;-o-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;

(vielfach noch mit sog. Vendor-Prefixes)

Page 24: HTML5 und CSS3 - was jetzt schon möglich ist

Schlagschatten (box-shadow)

Bisher:

ein oder mehrere Hintergrundbilder und verschachtelte Divs

-moz-box-shadow: 0px 3px 8px #0e1014; -webkit-box-shadow: 0px 3px 8px #0e1014;-o-box-shadow: 0px 3px 8px #0e1014; box-shadow: 0px 3px 8px #0e1014;

Page 25: HTML5 und CSS3 - was jetzt schon möglich ist

Farbverläufe(gradient)

Bisher:

Hintergrundverlauf als Kachel oder Vollbild(belegte bereits 1 Container-Hintergrund)

-moz-linear-gradient (top, #... 0%, #.. 50%, #... 51%, #... 100%); -webkit-gradient (linear, left top, left bottom, color-stop(0%,#...), color-stop(50%,#...), color-stop(51%,#...), color-stop(100%,#...));-o-linear-gradient(top, #... 0%,#... 50%,#... 51%,#... 100%);

linear-gradient (top, #... 0%,#... 50%,#... 51%,#... 100%);

Page 26: HTML5 und CSS3 - was jetzt schon möglich ist

Mehrfache Hintergrundbilder

Bisher:

Nur 1 Hintergrundbild pro Container möglich

background-images: url(…), url(…);background-position: center bottom, left top;background-repeat: no-repeat;background-color: #...;

Merke:

Die Angabe “background-color” muss am Ende stehen, um nicht von “url” überschrieben zu werden.

Page 27: HTML5 und CSS3 - was jetzt schon möglich ist

CSS3-ElementeImplementierung in modernen Browsern

Typ Webkit (Safari ~5+, Chrome ~4+)

Gecko (Firefox 4+)

Presto (Opera ~11.10)

Trident (IE9+)

border-radius >= Safari 5 u.

Chrome 4 mit -webkit

>= 4 mit -moz

box-shadow s.o.

s.o

gradient s.o.

s.o

multiple backgrounds

Page 28: HTML5 und CSS3 - was jetzt schon möglich ist

Mehrere Spalten(column)

Bisher nicht vorhanden

-moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px;

Page 29: HTML5 und CSS3 - was jetzt schon möglich ist

Übergänge(transition)

Bisher nicht vorhanden

a.link { padding: 5px 10px; color: #000; background:

#9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

a.link:hover, a.link:focus { color: #030; background:

#690; }

Geht nur über veränderbare Eigenschaften, z.B. per :hover-Element.

Page 30: HTML5 und CSS3 - was jetzt schon möglich ist

Formänderung (transform)

Bisher nicht vorhanden

-moz-transform: rotate(-10deg) skew(-5deg, 5deg);-webkit-transform: rotate(-10deg) skew(-5deg,

5deg);-o-transform: rotate(-10deg) skew(-5deg, 5deg);-ms-transform: rotate(-10deg) skew(-5deg, 5deg);transform: rotate(-10deg) skew(-5deg, 5deg);

Page 31: HTML5 und CSS3 - was jetzt schon möglich ist

CSS3-ElementeImplementierung in modernen Browsern

Typ Webkit (Safari ~5+, Chrome ~4+)

Gecko (Firefox 4+)

Presto (Opera )

Trident (IE9+)

column >= Safari 5 u.

Chrome 17 teilweise mit -webkit

>= 3.6 teilweise

mit -moz

>= 11.6

>= 10

transition >= Safari 5 u.

Chrome 17 mit -webkit

>= 9 mit -moz

>= 11.6 mit -o

>= 10

mit -ms

transform >= Safari 5 u.

Chrome 17 mit -webkit

>= 10 mit -moz

Keine Angaben

>= 10

mit -ms

Page 32: HTML5 und CSS3 - was jetzt schon möglich ist

CSS Media Queries

CSS-Angaben (Layout) gemäß Bildschirmbreite anpassen:

Einbindung als externe CSS-Datei: <link rel="stylesheet" media="screen and (max-width: 1024px)"

href="small.css">

oder inline per @media: @media:@media screen and (max-width : 1024px)

{ hier stehen die CSS-Angaben}

Page 33: HTML5 und CSS3 - was jetzt schon möglich ist

CSS Media Queries

Skalierbarkeit beeinflussen: (Angabe im <head>-Bereich)

Ohne Zoom beim Start:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Mit Zoom beim Start:<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Page 34: HTML5 und CSS3 - was jetzt schon möglich ist

Responsive WebdesignMit Media-Queries läßt sich das Layout für unterschiedliche Bildschirmgrößen anpassen.

Page 35: HTML5 und CSS3 - was jetzt schon möglich ist

Webfonts als Link

Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin' rel='stylesheet' type='text/css'>

Steht im <head>-Tag der HTML-Datei.

Online-Fonts unter http://www.google.com/webfonts

Page 36: HTML5 und CSS3 - was jetzt schon möglich ist

Webfonts mit @import

Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;

<style type="text/css">@import url("http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin");

</style>

Steht im <head>-Tag der HTML-Datei.

Page 37: HTML5 und CSS3 - was jetzt schon möglich ist

Webfonts mit @font-face

Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;

@font-face {font-family: "GreyscaleBasicRegular";font-style: normal; font-weight: normal;src: url("fonts/Greyscale_Basic_Regular-webfont.eot"),

url("fonts/Greyscale_Basic_Regular-webfont.woff")

format("woff"), url("fonts/Greyscale_Basic_Regular-webfont.ttf")

format("truetype"), url("fonts/Greyscale_Basic_Regular-webfont.svg#webfontPursrqab") format("svg");}

Steht in der CSS-Datei unbedingt am Anfang.

Webfont-Pakete unter http://www.fontsquirrel.com/

Page 38: HTML5 und CSS3 - was jetzt schon möglich ist

CSS3-ElementeImplementierung in modernen Browsern

Typ Webkit (Safari ~5+, Chrome ~4+)

Gecko (Firefox 4+)

Presto (Opera )

Trident (IE9+)

border-radius < Safari 5 u. Chrome 4

mit -webkit

<4 mit -moz

box-shadow s.o.

s.o

gradient s.o.

s.o

multiple backgrounds

CSS Media Queries

Webfonts >= 5.5

Page 39: HTML5 und CSS3 - was jetzt schon möglich ist

Barrieren abbauen mit WAI-ARIA Rollen

ARIA = Accessible Rich Internet Applications

WAI = Web Accessibility Initiative

Ergänzung der HTML5-Semantik (auch in HTML4.01/XHTML) um beschreibende Zusatzinformationen als Information für Screenreader und assistive Techniken – auch für Suchmaschinen

Teilbereich => Landmark-Rollen

Deutsche Übersetzung der Richtliniehttp://www.hessendscher.de/wai-aria/

Page 40: HTML5 und CSS3 - was jetzt schon möglich ist

ARIA-Landmark-Rollen

article

banner

complementary

contentinfo

main

navigation

search

Page 41: HTML5 und CSS3 - was jetzt schon möglich ist

Online ansehen

http://csscience.com/responsiveslidercss3/

http://css3generator.com/

http://caniuse.com/

http://www.w3schools.com/html5/default.asp