html5 und css3 - was jetzt schon möglich ist
Post on 27-Jun-2015
1.137 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
HTML CSS JS HTML5
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
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>
<footer>
<section>
<nav> <aside><article>
Kopfbereich
<header><hgroup>
<h1>Hauptüberschrift</h1><h2>Unterzeile</h2></hgroup></header>
Hauptnavigation
<nav>
<ul><li>Link1</li><li>Link2</li>
</ul></nav>
Hauptinhalt
<section><article>
<h1 (h3)>Eine Überschrift</h1><p>Der Text</p><aside>
<p>Datum,
Autor etc.</p>
</aside></article></section>
Zusatzinformation
<aside><h1 (h3)>Sidebar</h1><section>
<h1 (h4)>Tagcloud</h1><p>Tags Tags Tags</p></section></aside>
zum Hauptinhalt
Fußbereich
<footer><p>Footer-Inhalte</p><address>Kontaktinformationen</address>
</footer>
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
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<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.
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)
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<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.
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
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
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.
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
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!
Neuigkeiten bei CSS3Neue Design-Möglichkeiten
CSS Media-Queries für ein „Responsive“ Layout
Webfonts einbinden mit @font-face
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)
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;
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%);
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.
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
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;
Ü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.
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);
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
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 WebdesignMit Media-Queries läßt sich das Layout für unterschiedliche Bildschirmgrößen anpassen.
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
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.
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/
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
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/
ARIA-Landmark-Rollen
article
banner
complementary
contentinfo
main
navigation
search
Online ansehen
http://csscience.com/responsiveslidercss3/
http://css3generator.com/
http://caniuse.com/
http://www.w3schools.com/html5/default.asp
top related