40
Neue Webtechnologien HTML5 & CSS3 Jakob Vesely Reife- und Diplomprüfung 2013 1. April 2013 Versionsnummer: 286 HTBLuVA St. Pölten Abteilung Elektronik Schwerpunkt Technische Informatik Schuljahr 2012-13

Neue Webtechnologien HTML5 & CSS3

Embed Size (px)

DESCRIPTION

Kleine Zusammenfassung der neuen Web-Technologien HTML5 und CSS3. Genauere Behandlung der Inhalte, welche für Webentwickler am wichtigsten sein werden.Ausgearbeitet für die Prüfung im Schwerpunktfach Technische Informatik bei der Reife- und Diplomprüfung 2013.

Citation preview

Page 1: Neue Webtechnologien HTML5 & CSS3

Neue Webtechnologien

HTML5 & CSS3Jakob Vesely

Reife- und Diplomprüfung 2013

1. April 2013

Versionsnummer: 286 HTBLuVA St. Pölten Abteilung Elektronik Schwerpunkt Technische Informatik Schuljahr 2012-13

Page 2: Neue Webtechnologien HTML5 & CSS3

Inhaltsverzeichnis

1 HTML und seine Geschichte...................................................................31.1 Anfänge von HTML und der Weg zu HTML5................................................................31.2 Die Entwicklung von HTML5 beginnt............................................................................31.3 HTML Aktuell und Zukunft.............................................................................................5

1.3.1 Kompatibilität von Browsern............................................................................................................6

2 Grundlagen zu HTML, CSS und JavaScript............................................72.1 HTML..............................................................................................................................72.2 CSS..................................................................................................................................82.3 JavaScript.......................................................................................................................9

3 HTML5....................................................................................................103.1 Übersicht......................................................................................................................103.2 Browser Präfixe............................................................................................................113.3 Offline...........................................................................................................................12

3.3.1 LocalStorage......................................................................................................................................123.3.2 SessionStorage.................................................................................................................................133.3.3 Cache Manifest.................................................................................................................................14

3.4 Formulare.....................................................................................................................163.4.1 Neue Input Typen.............................................................................................................................163.4.2 Neue Attribute...................................................................................................................................19

3.5 Audio/Video..................................................................................................................223.5.1 Video-Element...................................................................................................................................22

4 CSS3.......................................................................................................244.1 Neue Eigenschaften.....................................................................................................24

4.1.1 Calc......................................................................................................................................................244.1.2 opacity.................................................................................................................................................254.1.3 border-radius.....................................................................................................................................264.1.4 Transitions.........................................................................................................................................27

4.2 Background..................................................................................................................294.2.1 Kompatibilität....................................................................................................................................294.2.2 Übersicht neuer Eigenschaften in CSS3......................................................................................294.2.3 Linear Gradient Background..........................................................................................................34

5 Anhang...................................................................................................355.1 Verwendete und weiterführende Literatur..................................................................35

5.1.1 HTML5 – Leitfaden für Webentwickler........................................................................................355.1.2 Mobile Anwendungen mit HTML5 und CSS3.............................................................................355.1.3 Nützliche Webseiten........................................................................................................................36

5.2 Abbildungsverzeichnis................................................................................................375.3 Tabellenverzeichnis.....................................................................................................385.4 Listings.........................................................................................................................395.5 Literaturverzeichnis.....................................................................................................40

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 2 von 40

Page 3: Neue Webtechnologien HTML5 & CSS3

1 HTML und seine Geschichte

1.1 Anfänge von HTML und der Weg zu HTML5Tim Berners-Lee arbeitete im Jahr 1989 am CERN1 in Genf.Er erkannte das Problem des Austauschens von Inhaltenund Forschungsergebnissen und entwickelte das World-Wide-Web. Dafür brauchte er eine Beschreibungsspracheum die Inhalte sichtbar zu machen. Die erste Version vonHTML wurde am 3. November 1992 veröffentlicht. Diese„Urversion“ orientierte sich rein an Text. Ein Jahr späterfolgte eine neue Version (wieder ohne Versionsnummer),die neben den Text auch Attribute, Bilder, Fett- und Kursiv-Darstellung enthielt. Der aktuelle HTML-Standard ist dieVersion 4.01 aus dem Jahr 1999. Im 21. Jahrhundert ging es dann mit der Entwicklung des XHTML-Standards weiter. Die Entwicklung von XHTML2.0 wurde im Jahr 2006 eingestellt. Wie es dazu kam,hat direkt mit der Entstehung von HTML5 zu tun.

1.2 Die Entwicklung von HTML5 beginntIm Jahr 2004 schlugen Mozilla und Opera die Weiterentwicklungvon HTML, CSS und DOM dem World-Wide-Web-Consortium(W3C) vor. Da man aber schon zuvor HTML4 durch XHTML,XForms, SVG und SMIL ersetzte, war es nicht verwunderlich, dassdas W3C XHTML2 und nicht HTML5 als neuen Web-Standard fürdie Zukunft weiterentwickeln wollte. Mit der Abstimmung im W3Cdie knapp mit 8:11 Stimmen gegen HTML5 ausging, war nun klar,dass die Entwicklung von HTML5 neben dem W3C ablaufenmüsse. Ian Hickson, ein Vertreter von Opera der auch für dasPositionierungspapier für die Entwicklung von HTML5verantwortlich war, schrieb nach der Abstimmung folgendes in seinem Blog:

„Die Punkte sind diskutiert, die Positionen bezogen, jeder weiß, wo der andere steht, jetzt ist es Zeit, sich zu beruhigen und mit der eigentlichen Arbeit zu beginnen.“

- Ian Hickson

Nur zwei Tage nach dem Workshop im W3C wurde die WHATWG (Web Hypertext ApplicationsTechnology Working Group) als „loses, inoffizielles und offenes Gemeinschaftsprojekt“ (eigeneBezeichnung der WHATWG) von den Browserherstellern Safari, Opera und Mozilla gegründet.

Das Projekt setzte sich zum Ziel mit einer aktiven Community an drei grundlegenden Spezifikationenzu arbeiten: Web Forms 2.0 (HTML-Formulare), Web Apps 1.0 (Web Applikationen) und WebControls 1.0 (Interaktive Widgets). Die Zusammenarbeit der Community wird über die Website derWHATWG www.whatwg.org koordiniert. Über einen Blog, Mailinglisten, Forums, ein Wiki und einenIRC Channel können Entwickler an der Entstehung des neuen Standards mitwirken.

Parallel zur WHATWG arbeitete die XHTML2 Working Group des W3C an einem völlig neuenStandard für das Web. Die WHATWG legte, ganz im Gegenteil zur XHTML2 WG, ein Augenmerk aufdie Rückwerkskompatibilität von HTML.

1 Europäische Organisation für Kernforschung bei Meyrin (Schweiz)

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 3 von 40

Abbildung 2: Logo des W3C[2]

Abbildung 1: Tim Berners-Lee[1]

Page 4: Neue Webtechnologien HTML5 & CSS3

Elemente wie Forms, Frames und die DOM Events sollten durch XForms, XFrames und XML Eventsersetzt werden. Jedes Element sollte die Attribute href und src erhalten, die Überschriften h1 bis h6sollten von h-Elementen in Verbindung mit section-Elementen ersetzt werden.

Durch die fehlende Unterstützung der Browserhersteller, erkannte auch das W3C mit der Zeit, dassdie Entwicklung nicht zielführend ist. Im Oktober 2006 lenkte schließlich Tim Berners-Lee, Direktordes W3C, ein und sprach sich für die Weiterentwicklung von HTML aus. Er erklärte in seinen Blog,dass er zur Einsicht kam HTML weiter zu entwickeln:

„Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.“

- Tim Berners-Lee

Er kündigt auch die Gründung einer neuen HTML Working Group im W3C auf breiter Basis mit denBrowserherstellern an. Dass er zum Entschluss gekommen war, dass XHTML2 keine Zukunft hatund man jetzt an einen sehr wichtigen Projekt für die Zukunft arbeiten werde, schrieb er zu Schlussin seinem Blog-Eintrag:

„This is going to be a very major collaboration on a very important spec, one of the crown jewels of web technology. Even though hundreds of people will be involved, we are evolving the technology which millions going on billions will use in the future. There won't seem like enough thankyous to go around some days. But we will be maintaining something very important and creating something even better.“

- Tim Berners-Lee

Es ergingen nun an alle Mitglieder der WHATWG Einladungen, sich der neuen Working Group desW3C anzuschließen. Die WHATWG war sehr Erfreut über diesen Schritt und so konstituierte sich imMärz 2007 die neue HTML Working Group (HTML WG) des W3C. Einige Monate später wurde in derHTML WG darüber abgestimmt, ob die bereits ausgearbeiteten Spezifikationen der WHATWG vonder neuen HTML WG übernommen werden sollten. Im Gegensatz zu der Abstimmung im Jahr 2004ging diese klar mit 48:5 Stimmen für die Übernahme der Spezifikationen aus.

Es gab aber natürlich weitreichende Differenzen zwischen der HTML WG und der WHATWG, zumBeispiel nannte die HTML WG das 3. Quartal 2010 und Ian Hickson von der WHATWG das Jahr 2022für die Recommendation. Sie waren sich also nicht einig wann HTML5 nun offiziell verabschiedetund zum fertigen Standard werden sollte. Auch die Arbeitsweisen der zwei Working Groups warensehr verschieden. Während die WHATWG ihre Spezifikation ständig weiter schrieb, folgte man imW3C dem sogenannten „Heardbeat“, einen bestimmten Rhythmus zur Änderung und Erweiterungihrer Spezifikationen.

Nach arbeitsreichen Jahren wurde 2008 die erste Version von HTML5 veröffentlicht. Der erste„Draft“, welcher von Ian Hickson geschrieben wurde, floss in die erste Version ein. Es wurdennatürlich weitere große Änderungen angekündigt, die auch später hinzukamen. Im gleichen Jahr istMozillas Firefox der erste Browser der HTML5 unterstützt.

2010 sollte das erste große Jahr für HTML5 werden. Im Jänner bot YouTube erstmals einenHTML5-Video-Player an. Im April steuerte Steve Jobs (unabsichtlich) seinen Teil für die Popularitätvon HTML5 bei. In einen offenen Brief erklärte er warum Flash niemals auf Apples mobilen Gerätenlaufen werde:

„Flash was designed for PCs using mice, not for touch screens using fingers.“

- Steve Jobs

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 4 von 40

Page 5: Neue Webtechnologien HTML5 & CSS3

Durch diese Aussage und die allgemein immer größer werdende Popularität von HTML5 erkanntenviele Unternehmen und Entwickler, dass es Zeit sei sich mit dem neuen Standard zu befassen. Nunbegann der große Hype um HTML5. Im Mai wechselte der Online-Dokumente Dienst „Scribd“ beieinigen Anwendungen auf HTML5. Im Dezember veröffentlichte Google seinen „Web Store“ inChrome, der auf HTML5 Apps basiert.

Auch im darauffolgenden Jahr 2011 geht die Eroberung des Webs weiter. Im März kauft Disney einHTML5-Spiele Startup auf. Im August bietet Amazon eine auf HTML5 basierende Webversion desKindle Readers an und Twitter gibt eine HTML5 Version für das iPad frei. 34% der „Top 100“Websites verwenden im September bereits HTML5. Zum Ende des Jahres stoppt Adobe die Flash-Entwicklung für mobile Geräte.

Flickr bekommt 2012 einen HTML5 Uploader und LinkedIn gibt eine native App für das iPad frei. Indiesem Jahr beendeten auch die HTML WG und die WHATWG ihre Zusammenarbeit. Das W3C hatEnde 2012 die Arbeit an wesentlichen Teilen für abgeschlossen erklärt.[3]

1.3 HTML Aktuell und ZukunftDie aktuelle Version von HTML ist genau genommen noch immer 4.01 aus dem Jahr 1999. Aberauch der aktuelle XHTML-Standard ist nicht sehr viel jünger, denn seit den frühen 2000er Jahrenwurde auch hier nichts neues veröffentlicht.

Laut dem Zeitplan des W3C soll HTML5 2014 offiziell verabschiedet werden. Dass heißt, dassHTML5 zu einer offiziellen W3C Recommendation werden soll. Im Mai 2011 erhielt HTML5 beimW3C den Status „Last Call“, welcher als letzte Aufforderung dienen soll, Kommentare zum HTML5-Entwurf einzureichen. Die WHATWG hat den Status „Last Call“ bereits am 27. Oktober 2009ausgerufen. Der Status „Last Call“ bedeutet aber auch, dass HTML5 faktisch bereits einen fertigenZustand angenommen hat, welcher mit einem Release Candidate vergleichbar ist.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 5 von 40

Page 6: Neue Webtechnologien HTML5 & CSS3

1.3.1 Kompatibilität von BrowsernEines der größten Probleme bei der derzeitigen Verwendung von HTML5 ist die aktuelleBrowserkompatibilität. Allerdings arbeiten die Browserhersteller sehr energisch an derImplementierung des neuen Standards in ihre Browser. Google ist hier beispielsweise im ihrenBrowser Chrome federführend. Der aktuelle Stand der Browserimplementierungen kann mit Hilfevon Webseiten wie www.html5test.com oder www.html5readiness.com analysiert werden.

Abbildung 3: Browserkompatibilität von HTML5 (Stand: 31.03.2013)

Wie in der Abbildung 3 zu sehen ist, steigt die HTML5 Unterstützung der Browser sehr stark. Vorallem Google und Apple und Opera liegen mit ihren Browsern sehr gut im Rennen. MicrosoftsInternet Explorer, das lange Zeit als Stiefkind von HTML5 galt, hat auch in letzter Zeit stark aufgeholt,liegt aber noch immer weit hinter den führenden Web-Browsern.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 6 von 40

Page 7: Neue Webtechnologien HTML5 & CSS3

2 Grundlagen zu HTML, CSS und JavaScriptDie hier angeführten Beispiele entsprechen bereits der Syntax und den neuen semantischenElementen von HTML5 und CSS3. Zum Einblick in die Syntax der drei Sprachen werden folgendkurze, einführende Beispiele gegeben.

2.1 HTMLHTML ist, wie in den vorherigen Kapiteln schon penibel beschrieben, eine Beschreibungssprache, dievon Tim Berners-Lee in den 1990er Jahren entwickelt wurde und für das World Wide Web vongrößter Bedeutung ist.

HTML-Text wird in sogenannten Tags aufgebaut. Diese werden ineinander verschachtelt undergeben eine HTML-Webseite. Eine HTML-Seite beginnt grundsätzlich mit dem Tag <html> undendet mit </html>. Innerhalb dieser Tags gibt es wieder zwei große Bereiche. Den Head- und denBody-Bereich. Im Head-Bereich werden Dinge wie der Titel der Seite, den zu verwendendenZeichensatz oder Verweise auf CSS-Files definiert. Im Body-Teil finden sich die Elemente, welcheauf der Seite dargestellt werden.

<html><head>

<title>Titel</title><meta charset="utf-8"><link rel="stylesheet" href="style.css?v=1.0" /><meta name="author" content="Jakob Vesely"><meta name="description" content="Website von Jakob Vesely">

</head><body>

<header><hgroup>

<h1>Website von Jakob Vesely</h1><h2>Semantisch richtige HTML5 Website...</h2>

</hgroup><nav>

<ul class="menu"><li><a href="#home">Home</a></li><li><a href="#blog">Blog</a></li><li><a href="#about">About Me</a></li><li><a href="#impressum">Impressum</a></li>

</ul></nav>

</header><section class="classenselektor">

<article><h1>Überschrift 1</h1><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita rebum. Stet clita kasd gubergren, no sea </p>

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 7 von 40

Page 8: Neue Webtechnologien HTML5 & CSS3

<form action="post1.php" method="post"><p>

<label for="tag">Datum:</label><input type="date" name="tag" />

</p><p>

<label for="anz">Anzahl:</label><input type="number" name="anz" />

</p> <input type="submit" value="Best&auml;tigen" />

</form></article>

</section><footer>

<p>&copy; by Jakob Vesely 2013</p></footer>

</body></html>

Listing 1: HTML Beispiel

2.2 CSSCSS dient zum stylen von HTML-Elementen. Mit HTML5 wird auch CSS immer wichtiger, da in denneuen Spezifikationen Tags die das Aussehen verändern nicht mehr gern gesehen werden und auchin den neuen Spezifikationen nicht mehr enthalten sind. Stattdessen soll das Komplette Aussehenmit CSS beschrieben und nur der semantische Inhalt mit HTML realisiert werden.

CSS-Befehle, wie zum Beispiel width, height, position oder background werden zu einensogenannten Selektor (Klassen-, ID-Selektor, ...) zusammengefasst und so dem richtigen HTML-Element zugewiesen.

Als Beispiel ist hier ein Klassenselektor für ein div-Element angeführt:

.classenselektor{

width: 90%;height: calc(100%-100px);position: absolute;top: 100px;left: 5%;background: -moz-radial-gradient(center, #fff, #adf);background: -webkit-radial-gradient(center, #fff, #adf);background: -o-radial-gradient(center, #fff, #adf);background: -ms-radial-gradient(center, #fff, #adf);background: radial-gradient(center, #fff, #adf);

}Listing 2: CSS Beispiel

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 8 von 40

Page 9: Neue Webtechnologien HTML5 & CSS3

2.3 JavaScriptJavaScript ist neben PHP die wahrscheinlich wichtigste Skriptsprache in der Web-Entwicklung. MitHTML5 wird sie noch wichtiger. Viele Funktionen, wie zum Beispiel die Offline und Storage Featuresoder das Modifizieren von Video- und Audio-Element Funktionen lassen sich mit JavaScriptrealisieren. Auch moderne Plugins wie Jquery, GMAP3 oder node.js erfreuen sich immer größererBeliebtheit und werden auch von vielen bekannten Webseiten verwendet.

<script type="text/javascript" language="javascript">var play_pause_button = function (ctrl){

if (video.paused){

video.play();crtl.value = String.fromCharCode ('0x25AE', '0x25AE');

}else{

video.pause();crtl.value = String.fromCharCode('0x25B6');

}};

</script>Listing 3: JavaScript Beispiel

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 9 von 40

Page 10: Neue Webtechnologien HTML5 & CSS3

3 HTML5

3.1 ÜbersichtDie Funktionen von HTML5 können grundsätzlich in folgende Teilbereiche eingeteilt werden:

Semantik Offline und Speicher Dateizugriff Verbindung

Audio/Video 3D/Grafik und Effekte Leistung und Integration CSS3

Der Umfang der HTML5 und CSS3 Spezifikationen is so enorm groß, dass in diesem Dokument diefür die zukünftige Webentwicklung am wichtigsten gehaltenen neuen Funktionen von HTML5 undCSS3 behandelt werden.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 10 von 40

Page 11: Neue Webtechnologien HTML5 & CSS3

3.2 Browser PräfixeDa vor allem früher, aber auch noch heute, viele Befehle in CSS3 noch nicht fertig standardisiert sind,wurden für die Zeit der Entwicklung (Drafts, Betaphasen, usw.) Präfixe eingeführt. Diese werden amBeginn des Befehls einfach vorangesetzt. Wenn die Befehle fertig spezifiziert sind, können diesePräfixe dann einfach weggelassen werden.

In der folgenden Tabelle sind alle Präfixe aufgeführt:

Präfix Browser

-moz- Firefox

-ms-, mso- Internet Explorer

-khtml- Konqueror

-o- Opera

-webkit- Chrome, SafariTabelle 1: Übersicht Browser Präfixe

Ein derzeit noch aktives Beispiel ist die CSS3-Eigenschaft „border-radius“ mit der Ecken abgerundetwerden können. Hierzu das Beispiel:

.klasse { border-radius: 12px; // Standard ohne Präfix-moz-border-radius: 12px; // Präfix für Mozilla-webkit-border-radius: 12px; // Präfix für Webkit (Safari, Chrome)-o-border-radius: 12px; // Präfix für Opera-khtml-border-radius: 12px; // Präfix für KHTML

}Listing 4: Beispiel - Einsatz von Präfixen

Ein prominentes Beispiel dafür dass sich bei den noch nicht standardisierten Befehlen schnell etwasändern kann ist die für den Hintergrund eingesetzte Funktion der Gradienten. Hierbei änderte sichmitten in der Entwicklungszeit noch die eigene Syntax.

Background-image: -Webkit-linear-gradient(weite 0%, #9FBFD2 100%); Background-image: -mol-linear-gradient(weite 0%, #9FBFD2 100%); Background-image: -o-linear-Gradient(weite 0%, #9FBFD2 100%); Background-image: linear -gradient(weite 0%, #9FBFD2 100%);

Listing 5: Beispiel – Präfixe bei den Gradienten Funktion

Grundsätzlich gibt eben diese Präfixe um noch nicht standardisierte Befehle schon wesentlichfrüher einzusetzen und zu verwenden. Allerdings ist hierbei natürlich Vorsicht geboten, weil sich sehrrasch etwas in der Syntax der Befehle ändern kann.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 11 von 40

Page 12: Neue Webtechnologien HTML5 & CSS3

3.3 OfflineEin Bereich, der in den früheren HTML Versionen gar nicht vorhanden war, kommt in der neuenSpezifikation umso mehr zum Zug. Er Umfasst die Gebiete Offline und Storage. Nicht zuletzt durchden vorausschauenden Blick der WHATWG im Jahr 2004, die mit ihren eigenen Spezifikationen dieForcierung von Applications erkannt haben ist es zu verdanken, dass diese Technologien ihren Platzgefunden haben.

3.3.1 LocalStorage

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.5+ 4+ 10.5+ 8+ 3.2+ 2.1+ - 11+

FunktionDer localStorage ist ein lokaler Speicher, welcher Clientseitig verwendet werden kann. Bisher war esüblich Daten online, zum Beispiel in einer MySQL-Datenbank, zu speichern. Diese Datenbankenwerden aber serverseitig betrieben und werden im Normalfall nicht für die Speicherung vonWertepaaren herangezogen. Cookies sind für stabile offline-Webanwendungen unzuverlässig.Abhilfe schafft hier der schon weit verbreitete „localStorage“. Damit ist es möglich Wertepaare lokalClientseitig zu speichern.

SyntaxWertepaare des localStorage können gespeichert (setItem), ausgelesen (getItem) und gelöscht(removeItem) werden. Ebenso kann der gesamte Speicher geleert (clear) werden

Speichern eines Wertepaares:

localStorage.setItem(key, value);Listing 6: LocalStorage – Speichern eines Wertepaares

Auslesen eines Wertepaares:

localStorage.getItem(key);Listing 7: LocalStorage – Auslesen eines Wertepaares

Löschen eines Wertepaares:

localStorage.removeItem(key);Listing 8: LocalStorage – Löschen eines Wertepaares

Löschen aller Wertepaare im localStorage:

localStorage.clear();Listing 9: LocalStorage – Löschen aller Wertepaare

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 12 von 40

Page 13: Neue Webtechnologien HTML5 & CSS3

3.3.2 SessionStorage

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.5+ 4+ 10.5+ 8+ 3.2+ 2.1+ - 11+

FunktionDer SessionStorage hat im Prinzip die gleiche Funktion wie der LocalStorage (siehe dazu 3.3.1LocalStorage), bis auf den Unterschied, dass dieser Speicher nur für die jeweilige Session verfügbarist!

Syntax

Speichern eines Wertepaares:

sessionStorage.setItem(key, value);Listing 10: SessionStorage – Speichern eines Wertepaares

Auslesen eines Wertepaares:

sessionStorage.getItem(key);Listing 11: SessionStorage – Auslesen eines Wertepaares

Löschen eines Wertepaares:

sessionStorage.removeItem(key);Listing 12: SessionStorage – Löschen eines Wertepaares

Löschen aller Wertepaare im localStorage:

sessionStorage.clear();Listing 13: SessionStorage – Löschen aller Wertepaares

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 13 von 40

Page 14: Neue Webtechnologien HTML5 & CSS3

3.3.3 Cache Manifest

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.5+ 4+ 10.6+ 10+ 3.2+ 2.1+ 3.2+ 11+

FunktionMit der Einführung des Cache Manifests ist es nun möglich Dateien offline bereit zustellen.Grundsätzlich ist das Cache Manifest ein Textdokument, in dem Definiert ist, welche Dateien offlineZwischengespeichert werden. Dazu gliedert sich das Dokument in drei Grundbereiche. Je nacheingeteilten Bereich, wird das angegebene File offline zwischengespeichert, nur online verfügbargemacht oder nur dann geladen wird, wenn ein definiertes File nicht gefunden werden kann. Die dreiBereiche heißen wie folgt:

NETWORK Für diese Dateien ist eine Verbindung zum Server erforderlich. Bei allen Anfragen andiese Ressourcen wird der Cache umgangen, selbst wenn der Nutzer offline ist.

CACHE Einträge unter „CACHE“ werden beim ersten Herunterladen explizit im Cachegespeichert. Diese Einträge können auch unter „CACHE MANIFEST“ stehen, dann istder Eintrag „CACHE“ nicht notwendig.

FALLBACK Für den Fall, dass auf eine Ressource nicht zugegriffen werden kann, wird einanderes File, das definiert wurde geladen. Die erste URI ist die Ressource, die zweitedas Fallback. Beide URIs müssen relativ sein und denselben Ursprung haben wiedie Manifest-Datei.

Tabelle 2: Bereiche im Cache-Manifest

Syntax

Einbindung in HTML-DokumentBei der Verwendung des Cache Manifests ist es wichtig, dass es in alle Dokumente, die im Manifestverwendet werden, eingebunden ist.

<html manifest="manifest.cache">…

</html>Listing 14: Einbinden des Cache Manifestes in einer HTML-Datei

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 14 von 40

Page 15: Neue Webtechnologien HTML5 & CSS3

Manifest-File

CACHE MANIFEST

#Kommentar

CACHE:index.html

NETWORK:images/*

FALLBACK:special/* only_online.html

Listing 15: Beispiel - Cache Manifest

Erklärung Beispiel:

Die Datei index.html wird zwingend offline Zwischengespeichert. Der Eintrag unter „NETWORK“bedeutet, dass alle Daten die sich im Verzeichnis „images“ befinden zwingend online Abgerufenwerden müssen. Wie in der Funktionsbeschreibung erläutert wird mit dem Eintrag „special/*only_online.html“ versucht alle Dateien aus dem Ordner „special“ zu cachen. Schlägt dies fehl weilkeine Verbindung vorhanden ist, wird das HTML-Dokument „only_online.html“ aufgerufen.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 15 von 40

Page 16: Neue Webtechnologien HTML5 & CSS3

3.4 FormulareIn HTML5 wurden zu den bereits bestehenden Formularen weitere Typen hinzugefügt und alle Tagsmit neuen Attributen versehen. So gibt es nun beim Input-Element zum Beispiel eigene Typen fürDatums-Angaben, Zahlen ober Email-Adressen. Diese können mit diversen Attributen eingeschränktund bereits clientseitig überprüft werden.

3.4.1 Neue Input TypenHier wird eine Übersicht über alle neuen HTML5 Input-Typs gegeben. In den nächsten Punkten, wirdauf ausgewählte Typen näher eingegangen.

Eingabetyp Verwendungszweck

tel Zur Eingabe einer Telefonnummer

search Fordert Nutzer zur Eingabe von Text auf, nach dem gesucht werden soll

url Zur Eingabe einer URL

email Zur Eingabe einer E-Mail-Adresse oder einer Liste von E-Mail-Adressen

datetime Zur Eingabe von Datum und Uhrzeit auf der Grundlage der Zeitzone UTC

date Zur Eingabe eines Datums ohne Zeitzone

month Zur Eingabe eines Datums mit Jahr und Monat, jedoch ohne Zeitzone

week Zur Eingabe eines Datums bestehend aus einer Jahres- und einer Wochenzahl, jedoch ohne Zeitzone

time Zur Eingabe einer Uhrzeit mit Stunde, Minute, Sekunden und Bruchsekunden, jedoch ohne Zeitzone

datetime-local Zur Eingabe von Datum und Uhrzeit ohne Zeitzone

number Für numerische Eingaben

range Für numerische Bereichs-Eingaben

color Zur Auswahl einer Farbe über ein entsprechendes SteuerungselementTabelle 3: Übersicht von allen neuen Input-Typen

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 16 von 40

Page 17: Neue Webtechnologien HTML5 & CSS3

3.4.1.1 Datum "date"

Kompatibilität

GoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

20+ - - 9+ - 5+ - - 10+

Funktion und SyntaxDas Datum-Element bringt nun endlich ein einheitliches Eingabefeld für Datumsangaben beiFormularen.

<input type="date" />Listing 16: Input-Element Datum

Der Browser erkennt nun, dass nur ein Datumeingegeben werden kann. Chrome von Google isteiner der wenigen Browser der bereits den neuenTypen implementiert hat. Mit einem Klick in dasInput-Feld stellt der Browser, wie in Abbildung 4 zusehen ist, eine eigene Ansicht für die Eingabeeines Datums dar.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 17 von 40

Abbildung 4: Input-Type „date“

Page 18: Neue Webtechnologien HTML5 & CSS3

3.4.1.2 Zahlen "number"

Kompatibilität

GoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

7+ - 5+ 9+ - 3.2+ 4+ - 10+

Funktion und SyntaxEin weiteres Element ist ein eigener Typ für Zahlen. Hierbei stellt der Browser das Eingabefeld mitzwei kleinen Buttons am Rand des Elements dar.

<input type="number" />Listing 17: Syntax Input-Type „number“

3.4.1.3 Farben "color"

Kompatibilität

GoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

20+ - - 11+ - - - - 10+

Funktion und SyntaxEtwas neues ist auch ein Typ fürdas auswählen von Farben. Hierzuverwendet der Browser dasbekannte Dialogfeld zurFarbauswahl.

<input type="color" />Listing 18: Syntax Input-Type „color“

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 18 von 40

Abbildung 5: Input-Type „number“

Abbildung 6: Input-Type „color“

Page 19: Neue Webtechnologien HTML5 & CSS3

3.4.2 Neue AttributeWie zuvor bei den neuen Input-Typen wird hier zuerst eine Übersicht über alle neuen Attributegegeben und anschließend auf einzelne Attribute genauer eingegangen.

Attribut Verwendungszweck

autofocus Richtet den Fokus der Eingabe auf das Element, sobald die Seite geladen wurde

placeholder Gibt dem Nutzer einen Hinweis darauf, welche Art von Daten eingegeben werden sollen

form Gibt ein oder mehrere Formulare an, auf das sich das Eingabeelement bezieht

required Ein boolesches Attribut, das angibt, dass das Element erforderlich ist

autocomplete Legt fest, dass ein Feld nicht auf der Grundlage der vorherigen Eingaben des Nutzers vom Browser automatisch vervollständigt oder vorausgefüllt werden soll

pattern Gleicht den Wert eines Elements mit einem regulären Ausdruck ab

dirname Sendet die Ausrichtung des Steuerungselements zusammen mit dem Formular

novalidate Verhindert eine Validierung der Formulareingaben, sofern dies für ein Formularelement angegeben ist

formaction Überschreibt das für das Formularelement angegebene Attribut "action"

formenctype Überschreibt das für das Formularelement angegebene Attribut "enctype"

formmethod Überschreibt das für das Formularelement angegebene Attribut "enctype"

formnovalidate Überschreibt das für das Formularelement angegebene Attribut "novalidate"

formtarget Überschreibt das für das Formularelement angegebene Attribut "target"Tabelle 4: Übersicht von allen neuen Attributen

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 19 von 40

Page 20: Neue Webtechnologien HTML5 & CSS3

3.4.2.1 Pattern

Kompatibilität

GoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

10+ 4+ 5+ 10+ 10+ - - - 10+

Funktion und SyntaxMit Pattern ist eine Clientseitige Überprüfung der Formulardaten möglich. Es können beispielsweisedie Formate von Telefonnummern überprüft werden.

Die Funktionsweise soll anhand des Input-Typen „tel“ für Telefonnummern erfolgen:

<form onsubmit="alert('Submitted');"><p>Telefonnummern Format: +43(664)1234567<p><input type="tel" pattern="[\+]\d{2}[\(]\d{3}[\)]\d{7}" /><input type="submit" value="&raquo;" />

</form>Listing 19: Beispiel - Pattern

Erklärung zum Beispiel:

Das Formular bestand grundsätzlichaus zwei Elementen. Einerseits dasEingabefeld für die Telefonnummer undandererseits der Button zur Bestätigungder Eingabe.

Dem Attribut Pattern wurde folgendeSyntax gegeben:

[\+]\d{2}[\(]\d{3}[\)]\d{7}

[\+], [\(], [\)] weißt darauf hin, dass ein „+“, „(“ und „)“ an der jeweiligen Stelle benötigt wird. DieAngabe d{3} sagt aus, dass eineDezimalzahl mit drei Ziffern einzugebenist.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 20 von 40

Abbildung 7: Fehlermeldung bei falscher Eingabe

Abbildung 8: Bei richtiger Eingabe wird das Formular submitted

Page 21: Neue Webtechnologien HTML5 & CSS3

3.4.2.2 required

Kompatibilität

GoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

10+ 4+ 5+ 10+ 10+ - - - 10+

Funktion und SyntaxDas Attribut ist ein sehr einfaches aberauch sehr wirkungsvolles Attribut. Mitdiesem kann nämlich angegebenwerden, ob ein Feld unbedingtausgefüllt werden muss, um dasFormular abzuschicken. Wird einsolches Element nicht ausgefüllt,erscheint eine Fehlermeldung.

<input type="tel" required />Listing 20: Syntax required-Attribut

Zusätzliches Styling im CSSEs ist auch möglich das Input Feld mitCSS so zu formatieren, dass deraktuelle Status über die richtige oderfalsche Eingabe in die Formatierungmit einfließt.

Hierzu werden die Pseudo-Selektorenvalid und invalid benützt.

Diese Selektoren beziehen sich abernicht nur auf das required-Attributsondern spricht auch auf falscheEingaben an, welche mit Patternbegrenzt wurden.

input:required:valid {background-image:url(valid.png);background-position:right center;background-repeat:no-repeat;

}

input:required:invalid {background-image:url(invalid.png);background-position:right center;background-repeat:no-repeat;

}Listing 21: Beispiel - CSS Pseudo-Selektoren valid und invalid

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 21 von 40

Abbildung 9:Fehlermeldung bei nicht erfolgter Eingabe

Abbildung 10: Zusätzliche Anzeige des Status „invalid“

Abbildung 11: Zusätzliche Anzeige des Status „valid“

Page 22: Neue Webtechnologien HTML5 & CSS3

3.5 Audio/Video

3.5.1 Video-Element

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.5+ 4+ 10.5+ 9+ 3.2+ 2.1+ - 11+

Kompatibilität Video Formate

Browser Version MP4 WebM Ogg

Internet Explorer 9+ Ja Nein Nein

Chrome 6+ Ja Ja Ja

Firefox 3.6+ Nein Ja Ja

Safari 5+ Ja Nein Nein

Opera 10.6+ Nein Ja JaTabelle 5: Kompatibilität von Video Formaten mit dem HTML5-Video-Tag

FunktionUnter HTML5 soll das Einsetzten von zusätzlichen Erweiterungen, wie zum Beispiel Flash für dasAbspielen von Videos, nicht mehr notwendig sein. Mit einem in HTML5 integrierten Video-Playerwird es in Zukunft einfacher Videos in eine Website einzubinden. Denn die Syntax und der Aufwandist im Vergleich zu den früher verwendeten Flash-Anwendungen sehr stark gesunken.

Syntax

Einfaches Einbinden eines Videos:

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Ihr Browser unterstützt den video-Tag nicht!

</video>Listing 22: Einbinden eines Videos in HTML5

Steuern mit JavaScript:Mit JavaScript können Videos gesteuert werden. Dass heißt, dass mit ein paar Befehlen Videosgestartet oder zum Beispiel angehalten werden können.

Zu erwähnen ist, dass die angeführten Methoden des hier bearbeiteten Video-Tags auch für dasHTML5 Audio-Element analog anzuwenden ist. In der folgenden Tabelle sind alle Methodenzusammengefasst:

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 22 von 40

Page 23: Neue Webtechnologien HTML5 & CSS3

Methode Beschreibung

addTextTrack() Fügt eine neue Textspur hinzu

canPlayType() Überprüft, ob der Browser den spezifischen Videotypen spielen kann

load() Ladet das Videoelement neu (reload)

play() Startet das Video

pause() Pausiert das gerade spielende VideoTabelle 6: Methoden von Video- und Audioelementen in HTML5

Beispiel<head>

<script type="text/javascript">function vidplay() {

var video = document.getElementById("movie");var button = document.getElementById("play");if (video.paused){

video.play();button.textContent = "||";

}else{

video.pause();button.textContent = ">";

}}function restart() {

var video = document.getElementById("movie");video.currentTime = 0;

}</script>

</head><body>

<video width="320" height="240" id="movie"><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Ihr Browser unterstützt den <video>-Tag nicht!

</video><button id="restart" onclick="restart();">[]</button><button id="play" onclick="vidplay()">&gt;</button>

</body> Listing 23: Beispiel – Verwendung von HTML5-Video Methoden in JavaScript

Audio-ElementDas Einbinden von Audiodateien und die JavaScript-Funktionen wie play und pause funktionierenanalog zum Video-Element. Als Tag wird wird „<audio>“ verwendet.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 23 von 40

Page 24: Neue Webtechnologien HTML5 & CSS3

4 CSS3

4.1 Neue Eigenschaften

4.1.1 Calc

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

19+ 4+ 6+ - 9+ 6+ - - -

FunktionDie neu hinzugekommene Funktion calc() ist meiner Meinung nach eines der besten Dinge die sichin der neuen Spezifikation von CSS3 befinden. Diese Funktion erlaubt es endlich Berechnungen inCSS durchzuführen.

Syntaxeigenschaft: calc(<operation>);

Listing 24: Syntax der calc()-Funktion

Beispielheader{

width:100%;height:100px;

}

.content{width:100%;height:calc(100%-100px);overflow: scroll;

}Listing 25: Beispiel – Anwendung der CSS3 Funktion calc()

Das Beispiel zeigt eine typische Anwendung der calc() Funktion: Der Kopf der Seite hat eine fixeHöhe von 100px. Früher war es nicht möglich den Content-Bereich der Seite auf 100% „aufzufüllen“.Nun werden einfach mit der calc() Funktion 100px von den variablen 100% abgezogen und die Seiteist genau auf 100% x 100% skaliert.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 24 von 40

Page 25: Neue Webtechnologien HTML5 & CSS3

4.1.2 opacity

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 2+ 3.1+ 9+ 5.5+ 3.2+ 2.1+ 5+ 10+

FunktionMit der Eigenschaft opacity ist es möglich die Transparenz von Elementen zu regulieren.

Syntaxopacity: <Wert>; /* Wert von 0 bis 1, Bsp.: 0.7 für 70% Deckkraft */

Listing 26: Syntax von opacity

Beispiel.classe_x{

background: #000;opacity:1;

}

.classe_x:hover{opacity:0.8;

}Listing 27: Beispiel Anwendung von opacity

Im Beispiel ändert sich die Deckkraft von 100% auf 80% wenn der Mauszeiger über ein Element mitder Klasse „classe_x“ bewegt wird.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 25 von 40

Page 26: Neue Webtechnologien HTML5 & CSS3

4.1.3 border-radius

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 2+ 3.1+ 10.5+ 9+ 3.2+ 2.1+ - 11+

FunktionDer Border Radius ist eine bereits häufig eingesetzte Funktion, welche vor allem im Bereich von Div-,Formular- oder Bildelementen verwendet wird. Mit dieser Funktion werden runde Ecken erzeugt. Derdazu angegebene Wert ist der Radius der Ecke.

Syntaxborder-radius: <value>;

Listing 28: Syntax von border-radius

Beispielinput{

border-radius: 2px;}

Listing 29: Beispiel - Anwendung des border-radius

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 26 von 40

Page 27: Neue Webtechnologien HTML5 & CSS3

4.1.4 Transitions

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 4+ 3.1+ 10.5+ 10+ 3.2+ 2.1+ - 10+

FunktionMit transitions können zeitgesteuerte Effekte nach speziellen Geschwindigkeitskurven ausgeführtwerden.

Syntaxtransition: <property> <duration> <timing-function> <delay>;

Listing 30: Syntax von transition

Die einzelnen Bestandteile von transition lassen sich auch in mehrere Befehle verteilen:

CSS-Eigenschaft Verwendungszweck

transition-property Name der Eigenschaft die verändert werden soll

transition-duration Gibt an wie lang der Befehl bis dass der fertig ausgeführt ist dauern soll

transition-timing-function

Gibt die „Geschwindigkeitskurve“ an

transition-delay Gibt an wann der Effekt gestartet werden sollTabelle 7: Einzelne Eigenschaften von transition

transition-timing-function - BézierkurvenDie bereits erwähnten „Geschwindigkeitskurven“ sindFunktionen, nach deren Verlauf der gewünschte Effektangewendet wird. Die hierbei angewendeten Kurven sinddie sogenannten „Bézierkurven“.

Nach Bézier können alle Kurven durch vier Kontrollpunktebestimmt werden. Zwei Kontrollpunkte befinden sich amAnfang und Ende einer variablen Linie, zwei weitere, die sogenannten Kurvenstützpunkte, außerhalb der Linie. DieKontrollpunkte werden als Kurvenpunkte oder Bézier Pointsbezeichnet, die Kurvenstützpunkte als Bézier Curve Points.Bei den beiden Kurvenstützpunkten handelt es sich um Anfasspunkte mit der die Krümmung derBézier-Kurven beeinflusst wird. Sie sind für die Definition der Tangentenvektoren in den Endpunktenmaßgeblich. Mit den beiden Kurvenpunkten an den Linienenden können die Linien gestaucht undgestreckt werden. Durch Teilung komplexer Kurven in einzelne Kurvenzüge können alle polygonenKurven und Oberflächen nachgebildet werden.[5]

Um die Anwendung dieser Funktion zu vereinfachen, gibt es voreingestellte Kurven. Es ist aber auchmöglich Effekte nach eigenen Kurven abarbeiten zu lassen.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 27 von 40

Abbildung 12: Kubische Bézierkurve[4]

Page 28: Neue Webtechnologien HTML5 & CSS3

Kurvenname linear ease-in ease-out ease-in-out Cubic-bezier (n, n, n, n)

Beschreibung Gleiche Geschw. vom Anfang bis zum Ende

Langsamer Start

Langsames Ende

Langsamer Start und langsames Ende

Eigene Definierte Kurve mit vier Werten

Grafik und Werte der Kurven

0, 0, 1, 1 0.42, 0, 1, 1 0, 0, 0.58, 1 0.42, 0, 0.58, 1 n, n, n, nTabelle 8: Übersicht der Bézierkurven für das Timing der Eigenschaft transition

Die in Tabelle 8 gezeigten Bézierkurven können als „transition-timing-function“ angewendet werden.

Beispieldiv {

width:100px;height:100px;background:black;transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-webkit-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-o-box-shadow: 0 0 10px #888;-moz-box-shadow: 0 0 10px #888;-webkit-box-shadow: 0 0 10px #888;box-shadow: 0 0 10px #888;

}

div:hover {opacity:0.5;-o-box-shadow: 0 0 10px blue;-moz-box-shadow: 0 0 10px blue;-webkit-box-shadow: 0 0 10px blue;box-shadow: 0 0 10px blue;width:200px;height:200px;

}Listing 31: Beispiel - Anwendung von transition

Im Angeführten Beispiel wird ein DIV-Element mit einer den gleichen Seitenlängen von 100px,schwarzen Hintergrund und einem Schatten bei einer Mausbewegung über das DIV-Element zueinem 200px großen Quadrat mit 50% Deckkraft und einen blauen Schatten.

Dies passiert alles in einer Zeit von 300 Millisekunden nach der Geschwindigkeitskurve „ease-out“.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 28 von 40

Page 29: Neue Webtechnologien HTML5 & CSS3

4.2 Background

4.2.1 KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.6+ 3.1+ 10+ 9+ 3.2+ 2.1+ 5+ 10+

4.2.2 Übersicht neuer Eigenschaften in CSS3Nachdem es beim Wechsel von CSS1 auf CSS2 beim Background-Element keine Änderungen gab,wurden bei CSS3 einige neue Features eingebaut. Folgende Tabelle listet die neuen CSS-Eigenschaften beim Background auf:

Eigenschaft Beschreibung

background-size Beschreibt die Größe des Hintergrunds

background-origin Beschreibt die Position eines Hintergrundbilds im Hintergrund selbst

background-clip Beschreibt die „Painting-Area“Tabelle 9: Übersicht der neuen Eigenschaften beim Background in CSS3

In CSS3 kamen aber nicht nur komplett neue Background-Elemente hinzu sondern es wurden aucheinige neue Werte für das Background-Element eingefügt. Zum Beispiel die schon reichlichverwendete Gradient-Background.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 29 von 40

Page 30: Neue Webtechnologien HTML5 & CSS3

4.2.2.1 background-size

Funktion„background-size“ ist, wie der Name schon sagt, eine Eigenschaft zum Ändern der Größe desHintergrundes. Vor allem durch cover und contain ist nun etwas möglich, dass bisher nur schwer zurealisieren war. So können nun sehr einfach Seiten mit einem ganzseitigen Hintergrundbild sehreinfach realisiert werden.

Syntax

background-size: <length>|<percentage>|cover|contain;Listing 32: Syntax von background-size

Option Beschreibung Beispiele

length Setzt die Höhe und Breite des Hintergrundbildes. Der erste Wert beschreibt die Weite und die Zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der Zweite automatisch als „auto“ angenommen.

background-size: 100px 100px;background-size: 20px 50px;background-size: 200px;

percentage Setzt die Höhe und Breite des Hintergrundbildes in Prozent im Bezug auf das Mutterelement. Der erste Wert beschreibt die Weite und die Zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der Zweite automatisch als „auto“ angenommen.

background-size: 100% 100%;background-size: 50%;

cover Skaliert das Hintergrundbild so, dass es so groß als möglich dargestellt wird und der gesamte Hintergrundbereich abgedeckt wird. Dadurch sind wahrscheinlich ein Teil des Hintergrundbildes nicht angezeigt.

background-size: cover;

contain Skaliert das Hintergrundbild so, dass es innerhalb desContent Bereichs so größtmöglich dargestellt wird.

background-size: contain;

Tabelle 10: Übersicht der Option für background-size

4.2.2.2 BeispielDas folgende Beispiel soll den Einsatz der Eigenschaft im Bereich einer Website mit einemvollflächigen Hintergrund zeigen.

HTML:

<html><head>

<title>FF Gemeinlebarn </title></head> <body id ="img_full_front">

<button id="news_button">Aktuelle News</button></body>

</html>Listing 33: Beispiel – Anwendung von background-size (HTML-Teil)

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 30 von 40

Page 31: Neue Webtechnologien HTML5 & CSS3

CSS:

#img_full_front{width:100%;height:100%;margin:0;padding:0;background: url('full.jpg');background-position: left center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;

}Listing 34: Beispiel – Anwendung von background-size (CSS-Teil)

Wie in den beiden Abbildungen zu sehen ist, wird durchdie Eigenschaft „background-size: cover;“ dasHintergrundbild auf einer Seite immer mit 100%skaliert. Aufgrund des Seitenverhältnisses und Größedes Browserfensters wird im Hochformat die Höhe undim Querformat die Länge mit 100% skaliert.

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 31 von 40

Abbildung 13: Skalierung im Hochformat

Abbildung 14: Skalierung im Querformat

Page 32: Neue Webtechnologien HTML5 & CSS3

4.2.2.3 background-origin

FunktionMit der Eigenschaft „background-origin“ kann der Ursprung für die Positionierung derHintergrundgrafiken festgelegt werden.

Syntax

background-origin: border-box|padding-box|content-box;Listing 35: Syntax von background-origin

Beispiel

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 32 von 40

Abbildung 16: Anwendung background-origin: content-box

Abbildung 15: Anwendung background-origin: padding-box

div{

width:300px;height:300px;padding:50px;margin:50px;background-image:

url('css3-logo.png');background-origin:

padding-box;background-repeat:no-repeat;border:2px solid #92b901;

}Listing 37: background-origin: padding-box

div{

width:300px;height:300px;padding:50px;margin:50px;background-image:

url('css3-logo.png');background-origin:

content-box;background-repeat:no-repeat;border:2px solid #92b901;

}Listing 36: background-origin: content-box

Page 33: Neue Webtechnologien HTML5 & CSS3

4.2.2.4 background-clip

FunktionMit „background-clip“ legt man fest, welcher Bereich des Elements von der Darstellung desHintergrundes betroffen sein soll.

Syntax

background-clip: border-box|padding-box|content-box;Listing 38: Syntax von background-clip

Beispiel

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 33 von 40

Abbildung 17: Anwendung background-clip: content-box

Abbildung 18: Anwendung background-clip: padding-box

div{

width:300px;height:300px;padding:50px;;background-color:yellow;background-clip:padding-box;border:2px solid #92b901;

}Listing 40: background-clip: padding-box

div{

width:300px;height:300px;padding:50px;;background-color:yellow;background-clip:content-box;border:2px solid #92b901;

}Listing 39: background-clip: content-box

Page 34: Neue Webtechnologien HTML5 & CSS3

4.2.3 Linear Gradient Background

KompatibilitätGoogleChrome

MozillaFirefox

MACSafari

Opera InternetExplorer

iOS Safari

Android OperaMini

OperaMobile

4+ 3.6+ 4+ 11.1+ 10+ 3.2+ 2.1+ - 11.1+

FunktionMit „linear-gradient()“ ist es möglich Hintergründe mit linearen Farbverläufen zu füllen.

Syntaxbackground: linear-gradient(<Anfangspunkt>, <farbe 1> <position 1>, <farbe 2> <position 2>, [<farbe n> <position n>]); white 75%);

Listing 41: Syntax von linear-gradient

Beispielwidth: 1400px;height: 300px;background: #848484; /* für alte Browser */background: linear-gradient(to bottom, #848484 0%, black 100%);

Listing 42: Beispiel – Anwendung von linear-gradient()

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 34 von 40

Abbildung 19: Farbverlauf mit linear-gradient()

Page 35: Neue Webtechnologien HTML5 & CSS3

5 Anhang

5.1 Verwendete und weiterführende Literatur

5.1.1 HTML5 – Leitfaden für WebentwicklerPlug-In-freie Wiedergabe von Video & Audio, neue Wege derInteraktion, mehr Semantik und Struktur - der kommendeWebstandard HTML5 bietet schon heute mehr Funktionalität undDynamik für Webentwickler und -Anwender. Anhand vielerinspirierender Beispielprojekte geben Ihnen unsere Web-ExpertenBernd Öggl und Klaus Förster erste Einblicke in die klassischenBestandteile von HTML5 wie u.a. Video, Audio, Canvas, intelligenteFormulare, Offline-Applikationen oder Microdata sowie Geolocation,Web Storage, Websockets und Web Workers. [7]

ISBN 978-3-8273-2891-5

Autoren Klaus Förster, Bernd Öggl

Verlag Addison-Wesley

Jahr 2011

5.1.2 Mobile Anwendungen mit HTML5 und CSS3Entdecken Sie die Möglichkeiten von HTML5 und CSS3 für dieEntwicklung von modernen und plattformübergreifenden Apps. Egal,ob für Tablets oder Smartphones, für Android oder iOS. Schnellerhalten Sie ein Gefühl für die technischen und gestalterischenMöglichkeiten einer mobilen Anwendung. Sie erstellen erste Apps,gestalten Zeitschriften und Bücher für iPad und Co. und nutzen alleMöglichkeiten der mobilen Geräte. Inkl. Ausbau zu nativenProgrammen und dem Einsatz von JavaScript-Frameworks.Abgerundet wird das Ganze durch eine Anleitung, die Ihnen zeigt, wieSie Ihre Anwendung in Apples App Store und Google Playveröffentlichen können. [9]

ISBN 978-3-8362-1848-1

Autoren Florian Franke, Johannes Ippen

Verlag Galileo Computing

Jahr 2012

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 35 von 40

Abbildung 20: Buch HTML5[6]

Abbildung 21: Buch Apps mit HTML5 und CSS3[8]

Page 36: Neue Webtechnologien HTML5 & CSS3

5.1.3 Nützliche Webseitenwww.html5rocks.com Die Website www.html5rocks.com ist ein Projekt von Google. Dies erklärt

auch die große Anzahl an Autoren der Seite die bei Google arbeiten. Aber auch andere Autoren der Firmen Adobe oder Opera arbeiten am Projekt mit. Diese Entwickler erklären die neuen HTML5-Funktionen und schreiben Tutorials. Auf der grundsätzlich englischsprachigen Website sind aber auch Teile in Deutsch übersetzt. Aktuell sind 59 Autoren - hauptsächlich Browserentwickler - an dem Projekt beteiligt.

www.w3schools.com W3Schools ist eine ähnliche Seite wie www.html5rocks.com. Hier werden ebenfalls die Erneuerungen von HTML5 vorgestellt. Die Seite bietet auch die Funktion gleich die neuen Funktionen direkt auf der Seite auszuprobieren.

www.w3c.org Die offizielle Website des W3C enthält alle offiziellen Spezifikationen der einzelnen Drafts zu HTML5.

www.whatwg.org Die offizielle Website der WHATWG mit den von der WHATWG eigens erarbeiteten Spezifikationen

www.css-tricks.com Diese Website beschäftigt sich – so wie es der Name schon sagt – ausschließlich mit CSS. Und hierbei nicht nur mit CSS3.

www.caniuse.com Diese Website bietet einen detaillierten Überblick über den aktuellen Stand der Implementierung von HTML5 und CSS3 in die Browser.

Tabelle 11: Übersicht nützlicher Webseiten

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 36 von 40

Page 37: Neue Webtechnologien HTML5 & CSS3

5.2 AbbildungsverzeichnisAbbildung 1: Tim Berners-Lee[1]...........................................................................................................................3Abbildung 2: Logo des W3C[2]...............................................................................................................................3Abbildung 3: Browserkompatibilität von HTML5 (Stand: 31.03.2013)..........................................................6Abbildung 4: Input-Type „date“............................................................................................................................17Abbildung 5: Input-Type „number“.....................................................................................................................18Abbildung 6: Input-Type „color“...........................................................................................................................18Abbildung 7: Fehlermeldung bei falscher Eingabe..........................................................................................20Abbildung 8: Bei richtiger Eingabe wird das Formular submitted................................................................20Abbildung 9:Fehlermeldung bei nicht erfolgter Eingabe................................................................................21Abbildung 10: Zusätzliche Anzeige des Status „invalid“................................................................................21Abbildung 11: Zusätzliche Anzeige des Status „valid“...................................................................................21Abbildung 12: Kubische Bézierkurve[4]..............................................................................................................27Abbildung 13: Skalierung im Hochformat.........................................................................................................31Abbildung 14: Skalierung im Querformat..........................................................................................................31Abbildung 15: Anwendung background-origin: padding-box.......................................................................32Abbildung 16: Anwendung background-origin: content-box........................................................................32Abbildung 17: Anwendung background-clip: content-box............................................................................33Abbildung 18: Anwendung background-clip: padding-box...........................................................................33Abbildung 19: Farbverlauf mit linear-gradient()...............................................................................................34Abbildung 20: Buch HTML5[6].............................................................................................................................35Abbildung 21: Buch Apps mit HTML5 und CSS3[8]........................................................................................35

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 37 von 40

Page 38: Neue Webtechnologien HTML5 & CSS3

5.3 TabellenverzeichnisTabelle 1: Übersicht Browser Präfixe..................................................................................................................11Tabelle 2: Bereiche im Cache-Manifest.............................................................................................................14Tabelle 3: Übersicht von allen neuen Input-Typen..........................................................................................16Tabelle 4: Übersicht von allen neuen Attributen...............................................................................................19Tabelle 5: Kompatibilität von Video Formaten mit dem HTML5-Video-Tag.............................................22Tabelle 6: Methoden von Video- und Audioelementen in HTML5...............................................................23Tabelle 7: Einzelne Eigenschaften von transition............................................................................................27Tabelle 8: Übersicht der Bézierkurven für das Timing der Eigenschaft transition...................................28Tabelle 9: Übersicht der neuen Eigenschaften beim Background in CSS3................................................29Tabelle 10: Übersicht der Option für background-size...................................................................................30Tabelle 11: Übersicht nützlicher Webseiten......................................................................................................36

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 38 von 40

Page 39: Neue Webtechnologien HTML5 & CSS3

5.4 ListingsListing 1: HTML Beispiel..........................................................................................................................................8Listing 2: CSS Beispiel..............................................................................................................................................8Listing 3: JavaScript Beispiel..................................................................................................................................9Listing 4: Beispiel - Einsatz von Präfixen...........................................................................................................11Listing 5: Beispiel – Präfixe bei den Gradienten Funktion.............................................................................11Listing 6: LocalStorage – Speichern eines Wertepaares...............................................................................12Listing 7: LocalStorage – Auslesen eines Wertepaares................................................................................12Listing 8: LocalStorage – Löschen eines Wertepaares.................................................................................12Listing 9: LocalStorage – Löschen aller Wertepaare......................................................................................12Listing 10: SessionStorage – Speichern eines Wertepaares........................................................................13Listing 11: SessionStorage – Auslesen eines Wertepaares.........................................................................13Listing 12: SessionStorage – Löschen eines Wertepaares...........................................................................13Listing 13: SessionStorage – Löschen aller Wertepaares.............................................................................13Listing 14: Einbinden des Cache Manifestes in einer HTML-Datei.............................................................14Listing 15: Beispiel - Cache Manifest.................................................................................................................15Listing 16: Input-Element Datum........................................................................................................................17Listing 17: Syntax Input-Type „number“............................................................................................................18Listing 18: Syntax Input-Type „color“.................................................................................................................18Listing 19: Beispiel - Pattern................................................................................................................................20Listing 20: Syntax required-Attribut....................................................................................................................21Listing 21: Beispiel - CSS Pseudo-Selektoren valid und invalid...................................................................21Listing 22: Einbinden eines Videos in HTML5..................................................................................................22Listing 23: Beispiel – Verwendung von HTML5-Video Methoden in JavaScript......................................23Listing 24: Syntax der calc()-Funktion...............................................................................................................24Listing 25: Beispiel – Anwendung der CSS3 Funktion calc()........................................................................24Listing 26: Syntax von opacity.............................................................................................................................25Listing 27: Beispiel Anwendung von opacity....................................................................................................25Listing 28: Syntax von border-radius.................................................................................................................26Listing 29: Beispiel - Anwendung des border-radius......................................................................................26Listing 30: Syntax von transition.........................................................................................................................27Listing 31: Beispiel - Anwendung von transition.............................................................................................28Listing 32: Syntax von background-size...........................................................................................................30Listing 33: Beispiel – Anwendung von background-size (HTML-Teil).......................................................30Listing 34: Beispiel – Anwendung von background-size (CSS-Teil)...........................................................31Listing 35: Syntax von background-origin........................................................................................................32Listing 36: background-origin: content-box.....................................................................................................32Listing 37: background-origin: padding-box....................................................................................................32Listing 38: Syntax von background-clip............................................................................................................33Listing 39: background-clip: content-box.........................................................................................................33Listing 40: background-clip: padding-box........................................................................................................33Listing 41: Syntax von linear-gradient...............................................................................................................34Listing 42: Beispiel – Anwendung von linear-gradient()................................................................................34

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 39 von 40

Page 40: Neue Webtechnologien HTML5 & CSS3

5.5 Literaturverzeichnis[1] Bild von Tim Berners-Lee. Bild online im Internet: http://www.edht.org.uk/Images/TimBerners-Lee1.jpg, 13.02.2013

[2] Logo des W3C. Bild online im Internet: http://www.w3.org/Icons/w3c_home. , 14.02.2013

[3] W3C erklärt HTML5 für fertig. Henning Behme, 2012, Online im Internet: http://www.heise.de/ix/meldung/W3C-erklaert-HTML5-fuer-fertig-1770814.html, 13.02.2013

[4] Kubische Bézierkurve. Bild online im Internet: http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Bezier_curve.svg/1000px-Bezier_curve.svg.png, 28.03.2013

[5] Bézier curve. IT Wissen.info, , Online im Internet: http://www.itwissen.info/definition/lexikon/Bezier-Kurve-Bezier-curve.html, 27.03.2013

[6] Bild von Buch HTML5 - Leitfaden für Webentwickler. Bild online im Internet: http://www.edv-buchversand.de/image.php?cnt=10&id=aw-3155, 10.03.2013

[7] Klaus Förster, Bernd Öggl, HTML5 - Leitfaden für Webentwickler, 2011

[8] Bild von Apps mit HTML5 und CSS3. Bild online im Internet: http://cover.galileo-press.de/9783836218481.jpg, 10.03.2013

[9] Florian Franke, Johannes Ippen, Apps mit HTML5 und CSS3, 2012

Neue Webtechnologien HTML5 & CSS3 | Jakob Vesely Seite 40 von 40