HTML5 und CSS3 - was jetzt schon möglich ist

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

World Wide Web Consortium Web Hypertext Application
Technology Working Group
Richtlinien für HTML 4.01
und XHTML (1.0, 1.1 + 2) Zusammenschluss von
Mitarbeitern bei Apple,
der Mozilla Foundation
und Opera.

Was ist an HTML5 anders?
 Semantische Struktur
 Audio und Video ohne Plugin
 Neue Formulartypen mit Eingabeunterstützung
 Inline SVG und MathML (XML-Elemente)

Semantische Struktur
<header>

<section>

<nav> <aside>
<article>

<footer>

Zusatzinformation
zum Hauptinhalt

HTML5-Strukturelemente
 Implementierung in modernen Browsern
Typ Webkit 5.3 Gecko 2 Presto 2.7 Trident 5.0
(Safari 5, (Firefox 4+) (Opera 10+) (IE9+)
Chrome 7)

section    
nav    
article    
aside    
hgroup    
header    
footer    

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.

Audio und Video
Das <video>-Tag kann
mehrere Quellen auf-
nehmen.
Das <audio>-Tag
ebenfalls.

Audio und Video

Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0
(Safari 5, (Firefox 3.6+) (Opera ~10+) (IE9+)
Chrome 17)

video    
audio    
source    
(Safari >= 5.1)

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.

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

Formulare
 neue <input>-Typen (Beispiele)
Type Webkit Gecko Presto Trident 5.0
(Safari, (Firefox) (Opera) (IE9+)
Chrome)

datalist    
url    
(nicht in Safari)

email    
(nicht in Safari)

Datum    
datetime, date,
month, week,
time, datetime-
local

Formulare
 neue <input>-Attribute (Beispiele)
Attribute Webkit Gecko Presto Trident 5.0
(Safari, Chrome) (Firefox) (Opera) (IE9+)

placeholder    
required    
(nicht in Safari)

pattern    
(nicht in Safari)

autofocus    

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 und
 bereits in modernen Browsern angezeigt.

Canvas + SVG

Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0
(Safari 5, (Firefox 3.6+) (Opera 11.6+) (IE9+)
Chrome 17)

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

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

 Muss im <head>-Bereich der Seite stehen!

 Neue Design-Möglichkeiten
 CSS Media-Queries für ein „Responsive“
Layout
 Webfonts einbinden mit @font-face

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

Abgerundete
Ecken (border-radius)

Bisher:
 ein oder mehrere Hintergrundbilder und verschachtelte Divs

Schlagschatten
(box-shadow)

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

Farbverläufe
(gradient)

Bisher:
 Nur 1 Hintergrundbild pro Container möglich

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

CSS3-Elemente

Typ Webkit (Safari ~5+, Gecko Presto Trident
Chrome ~4+) (Firefox 4+) (Opera ~11.10) (IE9+)

border-radius    
>= Safari 5 u. >= 4 mit -moz
Chrome 4 mit -webkit

box-shadow    
s.o. s.o

gradient    
s.o. s.o

multiple backgrounds    

Bisher nicht vorhanden

Mehrere Spalten
(column)


Übergänge
(transition)
Geht nur über
veränderbare
Eigenschaften, z.B.
per :hover-Element.


Formänderung
(transform)

CSS3-Elemente
Chrome ~4+) (Firefox 4+) (Opera ) (IE9+)

column    
>= Safari 5 u. >= 3.6 teilweise >= 11.6 >= 10
Chrome 17 teilweise mit -moz
mit -webkit

transition    
>= Safari 5 u. >= 9 mit -moz >= 11.6 mit -o >= 10
Chrome 17 mit - mit -ms
webkit

transform    
>= Safari 5 u. >= 10 mit -moz Keine Angaben >= 10
Chrome 17 mit - mit -ms
webkit

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}

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"/>

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

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

Webfonts als Link

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

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

Einbindung ins CSS:

Webfonts mit
@import

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

Einbindung ins CSS:

Webfonts mit
@font-face

Steht in der CSS-Datei
unbedingt am Anfang.

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

CSS3-Elemente
Chrome ~4+) (Firefox 4+) (Opera ) (IE9+)

border-radius    
< Safari 5 u. Chrome 4 <4 mit -moz
mit -webkit

box-shadow    
s.o. s.o

gradient    
s.o. s.o

multiple    
backgrounds
CSS Media    
Queries
Webfonts    
>= 5.5

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 Richtlinie
http://www.hessendscher.de/wai-aria/

ARIA-Landmark-Rollen
 article  main

 banner  navigation
 search
 complementary
 contentinfo

Online ansehen
 http://csscience.com/responsiveslidercss3/
 http://css3generator.com/
 http://caniuse.com/
 http://www.w3schools.com/html5/default.asp

HTML5 und CSS3 - was jetzt schon möglich ist

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie HTML5 und CSS3 - was jetzt schon möglich ist

HTML5 und CSS3 - was jetzt schon möglich ist