1. markup, noun. A markup language is a modern
system for annotating a document in a way that is
syntactically distinguishable from the text. The idea
and terminology evolved from the »marking up« of
manuscripts
—Wikipedia
HTML5 für Entwickler Kochan & Partner
Brand
Design
Markus Greve Development
Für den Abendkurs der Typographischen
Gesellschaft München, 2013
2. Markus Greve
KOCHAN & PARTNER
BRAND DESIGN DEVELOPMENT
T +49 89 17860–150
E markus.greve@kochan.de
@mrmontezuma
Demos, Links, Ressourcen http://www.kochan.de/html5
Slides http://de.slideshare.net/markusgreve/
2 Kochan & Partner Brand Design Development
3. Organisatorisches
28.02. Einführung
Hidden Gems
Part 1: Markup
07.03. Part 2: CSS
14.03. Part 3: Javascript
21.03. Hack-a-thon: Thema offen!
3 Kochan & Partner Brand Design Development
5. Was ist HTML5 und was nicht
...
Quelle: Peter Kröner, http://html5-buch.de
Creative Commons Namensnennung 3.0 Deutschland-Lizenz
5 Kochan & Partner Brand Design Development
6. Was ist HTML5?
HTML 4.01
XHTML 1
W3C, WHATGC
Nicht-Standard wird Standard
6 Kochan & Partner Brand Design Development
7. Was ist HTML5?
Offline &
Semantic Device Connectivity
Storage
3D, Graphics Performance &
Multimedia CSS3
& Effects Integration
Quelle: http://www.w3.org/html/logo/
7 Kochan & Partner Brand Design Development
16. normalize.css
A modern, HTML5-ready alternative to CSS resets
used by Twitter Bootstrap, HTML5 Boilerplate and
many more.
Quelle: http://necolas.github.com/normalize.css/
16 Kochan & Partner Brand Design Development
17. Modernizr
The All-In-One Entirely-Not-Alphabetical No-Bullshit
Guide to HTML5 Fallbacks
—Modernizr
SVG Accessiblity / ARIA
Canvas Web Sockets
Web Storage Geo Location
Video & Audio Application Cache
IndexedDB, WebSQL Browser State Management
WebForms ....
Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
17 Kochan & Partner Brand Design Development
18. –prefix–free
–prefix–free lets you use only unprefixed CSS
properties everywhere. It works behind the scenes,
adding the current browser’s prefix to any CSS
code, only when it’s needed.
—Lea Verou
Quelle: http://leaverou.github.com/prefixfree/
18 Kochan & Partner Brand Design Development
20. Standard-Typen für script und style
Standard-Wert für das script-Tag
type=“text/javascript“ language=“javascript“
Standard-Wert für das style-Tag
type=“text/javascript“
20 Kochan & Partner Brand Design Development
21. Skript-Ausführungsverhalten mit defer, async
Beispiel
<script defer>
// code that runs after DOM finished loading
// ...
</script>
<script async>
// code that runs in the background
// not blocking other scripts
// ...
</script>
21 Kochan & Partner Brand Design Development
22. a, area und link (1)
Vereinheitlichung von a, area und link
Umschließung
Wiederbelebung target, optionales href-Attribut
Typisierung mittels rel
Beispiel
<a target=“_blank“>Link ohne Ziel und Verstand</a>
<a href=“http://www.google.de“ rel=“prefetch“>
Descriptiver Rel-Einsatz
</a>
22 Kochan & Partner Brand Design Development
23. a, area und link (2)
Umfangreiches Set an Schlüsselworten für rel:
Navigation, Strukturierung index, first, last,
prev, next, up
Inhaltlich author, alternate, archives,
bookmark, external, help,
license, pingback, search,
tag
Beeinflussung Browser-Verhalten sidebar, prefetch,
nofollow, noreferrer
Typisierend icon, stylesheet
23 Kochan & Partner Brand Design Development
24. Fokus
Auto-Fokus erlaubt für input, select, textarea und button
Standardisierung der Fokus-Ermittlung
Auto-Fokus
<input type="text" name="search" autofocus />
Fokus-Ermittlung
if (document.hasFocus())
{
var element = document.activeElement();
}
24 Kochan & Partner Brand Design Development
30. Class List API
API
element.classList.length
.add()
.contains()
.item()
.remove()
.toggle()
Beispiele
myDiv.classList.add('active'); // 'active' is added
myDiv.classList.remove('active'); // 'active' is removed
myDiv.classList.toggle('active'); // add or remove
if (myDiv.classList.contains('active')) alert('Aktiv!')
30 Kochan & Partner Brand Design Development
31. Query-Selector API
API
document.querySelector(<CSS Selector>); // first match
document.querySelectorAll(<CSS Selector>); // all matches
Beispiel
var oddRows
= document.querySelectorAll('#table > tr:nth-child(odd)');
Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 2013
31 Kochan & Partner Brand Design Development
32. Frei definierbare Attribute: data-*
Attribute data-*
API element.dataset
Beispiel
<a data-file-type="pdf" data-file-size="73" href="...">
Preisliste und Kundenheft
</a>
// data-* will become dataset-Members, notice "Camel" writing
alert(element.dataset.fileType) // alerts "pdf"
alert(element.dataset.fileSize) // alerts "73"
32 Kochan & Partner Brand Design Development
33. History API
API
history.length
.back()
.forward()
.go(<delta>)
.state
.pushState(<stateObj>, <title>, <url>)
.replaceState()
window.onpopstate = function(e) {
// code to be executed after browser-back button
// ...
};
33 Kochan & Partner Brand Design Development
34. Zusammenfassung: Markup
Standard-Type für script und style
Skript-Ausführungsverhalten mit defer, async
Fokus-Behandlung mit autofocus, hasFocus() und activeElement()
a, area und link: Vereinheitlichung, Umschließung, Typisierung mit rel
SVG und MathML
WYSIWYG und Rechtschreibhilfe
34 Kochan & Partner Brand Design Development
35. Zusammenfassung: Javascript
HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML
Standardisierung getElementsByClassName()
ClassList API
Query Selector API
Frei definierbare Attribute mit data-*
History API
35 Kochan & Partner Brand Design Development
36. Part 1
Markup
36 Kochan & Partner Brand Design Development
42. Well-formed oder nicht? Egal!
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“ >
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
<p>Starting with HTML5
<p>
...
<a href=index.html>No quotation marks!</a>
<STRONG>You don't have to like this</STRONG>
<eM>I don't</Em>
</body>
<html>
42 Kochan & Partner Brand Design Development
43. Neue Elemente
Kopf- und Fußbereiche header, footer
Seitenabschnitte section
Artikel article
Navigationsbereiche nav
Begleitende Informationen aside
Abbildungen figure, figcaption
Markierung mark
43 Kochan & Partner Brand Design Development
44. Neue Elemente (2)
Uhrzeit time
Menü menu
Button/Checkbox/Radiobox command
Fortschrittsanzeige progress
Skala meter
Detailansicht details
Zusammenfassung einer Detailansicht summary
44 Kochan & Partner Brand Design Development
46. Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
Zusammenfassung inhaltlich
<section class="intro"> abgeschlossener Bereiche durch
article
Inhaltliche Strukturierung der Seite
<section class="copy"> bzw. des Artikels durch section
<article>
...
46 Kochan & Partner Brand Design Development
47. Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
Zusammenfassung inhaltlich
<section class="intro"> abgeschlossener Bereiche durch
article
Inhaltliche Strukturierung der Seite
<section class="copy"> bzw. des Artikels durch section
<article>
...
47 Kochan & Partner Brand Design Development
48. Navigationsbereiche: nav
Kennzeichnung der Hauptnavigationsbereiche als nav
Nebennavigationen außerhalb, z.B. Meta-Navigation im footer
...
<nav>
<ul>
<li><a href="news.html">News</a></li>
<li><a href="about.html">Über uns</a></li>
<li>...</li>
</ul>
</nav>
...
<a href="imprint.html">Impressum</a>
48 Kochan & Partner Brand Design Development
49. Begleitende Informationen: aside
<body>
<article> <aside>
Verwandte
<section> Themen
Ganz Innerhalb eines articles:
andere
sekundärer Inhalt in Bezug
Themen
<section> auf den Artikel
...
</aside> Außerhalb eines articles:
sekundärer Inhalt in Bezug
<aside> auf die Website als Ganzes
Mehr zu
diesem
Thema
</aside>
49 Kochan & Partner Brand Design Development
50. Abbildungen: figure und figcaption
<body>
<article>
Semantische Einheit für eine <section>
Abbildung figure, z.B. ein Bild, eine
Tabelle oder ein Diagramm, mit
optionaleer Abbildungsbeschriftung <figure>
figcaption. <img src=""... />
<svg... />
Reihenfolge der Darstellung kann <figcaption>
ohne Verständnisverlust verändert Quelle: BMW AG.
werden. </figcaption>
</figure>
<section>
50 Kochan & Partner Brand Design Development
51. Zeitangaben: time
Maschinenlesbare Kodierung von Zeitangaben des proleptischen
Gregorianischen Kalenders
Datumsangabe, Uhrzeit oder eine Kombination aus Datum und Uhrzeit
optional: Kennzeichnung als Veröffentlichungszeitangabe
Beispiele
Das <time datetime="2013-02-28">heutige</time> Seminar...
Jeden Tag um <time datetime="12:00">12</time> Uhr...
<time datetime="2013-03-01T17:00Z">Morgen um fünf</time>...
Veröffentlicht am: <time datetime="2013-02-26" pubdate>
26.02.13</time>
51 Kochan & Partner Brand Design Development
52. Markierung: mark
Hervorhebung von Text ohne inhaltliche Betonung
Nutzbar insbesondere (ausschließlich?) für Suchergebnisse (SERP)
Beispiel
<h1>Ihre Suche nach <em>entertain</em>:</h1>
<ul>
<li>Let me <mark>entertain</mark> you: Queen, Jazz, 1978</li>
<li>That's <mark>Entertain</mark>ment: Band Waggon, 1953</li>
</ul>
Ihre Suche nach entertain:
• Let me entertain you: Queen, Jazz, 1978
• That's Entertainment: Band Waggon, 1953
52 Kochan & Partner Brand Design Development
53. Fortschrittsanzeige: progress
Darstellung Betriebssystem-spezifisch
Maximum (max) und aktueller Status (value) optional via numerischem Wert
Aktueller Fortschriftt via element.position (0.0 – 1.0, –1 bei unbekannt)
Safari 6/Mac OS X
Internet Explorer/Windows Phone 8
Firefox 10 /Windows Non-Aqua
53 Kochan & Partner Brand Design Development
54. Skala: meter
Darstellung Betriebssystem-spezifisch
Grenzen (min, max) und aktuellem Wert (value) optional via numerischem Wert
Einfärbung bei Erreichen von Schwellwerten (low, high, optimum) möglich
Safari 6/Mac OS X
54 Kochan & Partner Brand Design Development
55. Outline-Algorithmus (1)
Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6
Hierarchie jedoch pro Sektion
Sektionen definiert durch section, nav, aside und article
55 Kochan & Partner Brand Design Development
56. Outline-Algorithmus (2)
Beispiel
<h1>Agenda</h1> 1. Agenda
<section> 1.1 Begrüßung
<h1>Begrüßung</h1>
1.1.1 Schirmherr
<h2>Schirmherr</h2>
<h2>Sponsorenvertreter</h2> 1.1.2 Sponsorenvertreter
<h1>Top 1: Gruppen</h1> 1.2 Top 1: Gruppen
<h1>Top 2: Plenung</h1>
1.3 Top 2: Plenum
</section>
<h1>Anlagen</h1> 2. Anlagen
56 Kochan & Partner Brand Design Development
57. Umdeutung/Änderung bestehender Elemente
Hervorhebung em, strong
Abkürzung und Akronym abbr
Quellcode code
Adresse address
Gleichwertige Abhebung, Fachbegriffe b, i
Inhaltlicher Bruch hr
»Kleingedrucktes« small
57 Kochan & Partner Brand Design Development
58. Entfernte Elemente
Frames frameset, frame, noframes
dir, basefont, big, center,
Präsentationselemente
font, s, strike, tt, u
Akronyme acronym
Applets applet
Einzeiliges Eingabefeld (?) isindex
Randnotiz: HTML5 definiert, wie diese nicht spezifizierten Elemente dargestellt werden sollen... :-)
58 Kochan & Partner Brand Design Development
59. A
R
I
A
59 Kochan & Partner Brand Design Development
60. Accesible
Rich
Internet
Application
60 Kochan & Partner Brand Design Development
62. Implizite Rollen und Überschreibung
Element Default role Überschreibbar mit
article article document, application, main
aside note complementary, search
header keine banner
li listitem treeitem
ol list tree, directory
output status Alle
section region document, application, log,
contentinfo, search, alert, main,
dialog, alertdialog, status, log
table grid treegrid
ul list tree, directory
body document application
62 Kochan & Partner Brand Design Development
65. Microdata: Google Rich Snippets
Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170
65 Kochan & Partner Brand Design Development
66. Microdata: Google Rich Snippets (2)
Quelle: http://www.google.com/webmasters/tools/richsnippet
66 Kochan & Partner Brand Design Development
67. Zusammenfassung: Semantik
Syntax: doctype, well formed, Auslassung
Neue Elemente
Umdeutung/Änderung bestehender Elemente
Entfernte Elemente
Outline-Algorithmus
WAI-ARIA
Microdata
67 Kochan & Partner Brand Design Development
69. Neue Typen für input (1)
Textfeld text
Suchfeld search
Telefonnummer telephone
URL* url
E-Mail-Adresse* email
Numerischer Wert* number
Bereich* range
Farbwahl / Color picker color
* Eingebaute Validierung
69 Kochan & Partner Brand Design Development
70. Neue Typen für input (2)
Datum- und Zeit-Angaben datetime
Datum date
Monat month
Woche week
Zeit time
Datum- und Zeit in lokaler Notation datetime-local
70 Kochan & Partner Brand Design Development
71. Typ number, range
Eingabefeld oder Regler für Fließkomma-Zahlen
optional: Grenzen (min, max) und Schrittweite (step)
Beispiele
<input type="number" min="-10" max="87" step="1" />
<input type="range" min="-10" max="87" step="1" />
Safari 6/Mac OS X
IE 10/WIndows 8
71 Kochan & Partner Brand Design Development
72. Typ search
Eingabefeld für Suchen
Darstellung nach Art des Betriebssystems
Beispiel
<input type="search" placeholder="Suche" />
Safari 6/Mac OS X
72 Kochan & Partner Brand Design Development
73. Typ Farbwahl / Colorpicker color
Leider noch kaum implementiert
Beispiel
<input type="color" />
Chrome 25/Mac OS X
Opera 12/Mac OS X
73 Kochan & Partner Brand Design Development
74. Typ für Datum- und Zeitangaben
Validierung, optional mit Beschränkung min und max
Beispiele
<input type="datetime" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime-local" />
Chrome 25/Mac OS X
74 Kochan & Partner Brand Design Development
75. Neue Elemente
Erzeugung von Schlüsseln keygen
Objekt object
Ausgabebereich output
Auto-Vervollständigung datalist
75 Kochan & Partner Brand Design Development
76. Auto-Vervollständigung: datalist
Beispiel
<input list="albums" />
<datalist id="albums">
<option value="Queen" /> Chrome 25/Mac OS X
<option value="Queen II" />
<option value="Sheer Heart...
<option value="A Night At ...
<option value="A Day At Th...
<option value="The Game" ...
<option value="The Works" />
<option value="A kind of m...
<option value="The Miracle"
<option value="Innuendo" />
...
76 Kochan & Partner Brand Design Development
77. Neue Attribute
Referenz auf zugehöriges Formular form
Steuerung Auto-Vervollständigung autocomplete
Referenz auf Vorschlagsliste list
Mehrfach-Feld (z.B. bei Datei-Upload) multiple
Platzhalter / Eingabehilfe placeholder
Checkbox mit unbekanntem Zustand indeterminate
Steuerung Button-Verhalten formaction, formenctype,
formmethod, formnovalidate
77 Kochan & Partner Brand Design Development
78. Steuerung Button-Verhalten
Beispiel
<form action="standard.php" method="post">
<button type="submit">Absenden</button>
<button type="submit" formaction="alternate.php">
Anderswohin
</button>
<button type="submit" formnovalidate>Ohne Prüfung</button>
</form>
Absenden Anderswohin Ohne Prüfung
Validierung Validierung keine Validierung
Post Post Post
standard.php alternate.php standard.php
78 Kochan & Partner Brand Design Development
79. Validierung
Validierung auf Ebene Element, Feldgruppe oder Formular
Keine Validierung für hidden, submit, image, reset und object
CSS Pseudo-Selektoren für Styling :in-range, :default, :required
Fehlermeldung bei Absenden des Formulars oder manuell via Javascript API
Beeinflussung durch Attribute novalidate, required und pattern
z.B. pattern="[0-9]{5}"
79 Kochan & Partner Brand Design Development
80. Validation API
Member
Bool'scher Wert element.willValidate
Lokalisierte Fehlermeldung element.validationMessage
Datenstruktur zur Fehleranalyse element.validity
.valid
.valueMissing
.typeMismatch
.patternMismatch
.tooLong
.rangeUnderflow
.rangeOverflow
.stepMismatch
.customError
Methoden
Validierung auslösen element.checkValidity()
Eigene Regel setzen element.setCustomValidity()
80 Kochan & Partner Brand Design Development
81. Browser
Unterstützung?
81 Kochan & Partner Brand Design Development
82. Mac OS X
82 Kochan & Partner Brand Design Development
83. Windows 8
83 Kochan & Partner Brand Design Development
84. iOS (1)
84 Kochan & Partner Brand Design Development
85. iOS (2)
85 Kochan & Partner Brand Design Development
87. Zusammenfassung: Formulare
Neue Typen für input
Neue Elemente und Attribute
Validierung und Validation API
Browser-Unterstützung
87 Kochan & Partner Brand Design Development
89. Audio- und Video-Einbindung
Steuerelemente an/abschaltbar mit controls (»Headless«)
Alternativer Inhalt innerhalb des Elements
Umfangreiche Javascript API zur Steuerung
Beispiel
<audio src="queen-a-day-at-the-races.ogg" controls>
Leider unterstützt ihr Browser das audio-Element nicht.
Klicken Sie hier, um die <a href="queen-a-day-at-the-
races.ogg">Datei herunterzuladen</a>.
</audio>
89 Kochan & Partner Brand Design Development
90. Audio-Attribute
Beispiel
Quellenangabe: src,
<audio
hier mit Framestart und -ende #t=
src="audio.ogg#t=10,20"
controls Steuerelemente: controls
autoplay
preload="auto" Automatisches abspielen: autoplay
loop
> Preload-Verhalten:
... none, metadata, auto
</audio>
Wiederholte Wiedergabe: loop
90 Kochan & Partner Brand Design Development
94. Audio- und Video API: Member
Lautstärke (0 – 1) element.volume
Pausiert (true, false) element.paused
Ton ausgeblendet (true, false) element.muted
Position auslesen und setzen element.currentTime
Aktuelle Mediendatei element.currentSrc
Abspieldauer (Streams: 'infinity') element.duration
Startzeitpunkt element.startTime
Normale Abspielgeschwindigkeit (0 – 1) member.defaultPlaybackRate
Abspielgeschwindigkeit (0 – 1) member.playbackRate
94 Kochan & Partner Brand Design Development
95. Audio- und Video API: TimeRanges
Member
(Bereits) Durchsuchbarer Zeitraum element.seekable
Abgespielter Zeitraum element.played
Vorgelden (gepufferter) Zeitraum element.buffered
[TimeRangeObject]
Anzahl der definierten Zeiträume timerange.length
Startzeitpunkt von Zeitraum n timerange.start(n)
Endzeitpunkt von Zeitraum n timerange.end(n)
95 Kochan & Partner Brand Design Development
96. Audio- und Video API: Methoden
Abspielen element.play()
Pausieren element.pause()
Mediendatei laden element.load(<url>)
Codec-Unterstützung abfragen element.canPlayType(<type>)
Beispiel
var p = document.getElementById('player');
var s = p.canPlayType("video/ogg; codecs='theora'");
switch(s)
{
case '': alert('Sorry, no way'); break;
case 'maybe': if (confirm('Own risk?')) p.play(); break;
case 'probably': p.play(); break;
}
96 Kochan & Partner Brand Design Development
97. Events
loadstart Der Ladevorgang wurde begonnen
loadedmetadata Die Meta-Daten der Datei wurden geladen
canplay Abspielen nun möglich
canplaythrough Abspielen nun ohne weiteres Buffering möglich
play Abspielen wurde gestartet
ended Das Medienelement hat sein Ende erreicht
Beispiel
document.getElementById('player').addEventListener('ended',
function() { alert('Ende, aufwachen!'); });
97 Kochan & Partner Brand Design Development
98. Fehlerbehandlung (1)
element.error
null Kein Fehler
1 MEDIA_ERR_ABORTED Abbruch durch den Benutzer
2 MEDIA_ERR_NETWORK Netzwerkfehler
3 MEDIA_ERR_DECODE Fehler beim Dekodieren
4 MEDIA_ERR_SRC_NOT_SUPPORTED Dateiformat/Codec nicht unterstützt
element.networkState
0 NETWORK_EMPTY Ladevorgang noch nicht begonnen
1 NETWORK_IDLE Kein Element zu laden
2 NETWORK_LOADING Ladevorgang
3 NETWORK_LOADED Ladevorgang abgeschlossen
4 NETWORK_NO_SOURCE Keine Mediendatei vorhanden
98 Kochan & Partner Brand Design Development
99. Fehlerbehandlung (2)
element.readyState
0 HAVE_NOTHING Noch keine Daten vorhanden
1 HAVE_METADATA Metadaten vorhanden (duration, ...)
2 HAVE_CURRENT_DATA Erste Daten liegen vor, jedoch noch
nicht ausreichend, um abzuspielen
Daten für aktuelle Position und die
3 HAVE_FUTURE_DATA nächstenSekunden liegen vor,
abspielen kann starten
Entweder komplett geladen oder
4 HAVE_ENOUGH_DATA Abschätzung aufgrund aktueller
Netzwerkperformance ok
99 Kochan & Partner Brand Design Development
101. Zusammenfassung: Audio- und Video
Einbindung
Audio- und Video-Attribute
Multiple Quellen
Audio- und Video API: Member, Methoden und Events
Fehlerbehandlung: error, networkState, readyState
Codecs
101 Kochan & Partner Brand Design Development
104. HTML-Einbindung
index.html
<html
manifest="cache.manifest"> Referenzierung der Manifest-
<head> Datei im HTML-Element
<title>The Works offline...
</head> Auslieferung der Datei mit dem
... Mime-Type: text/cache-manifest
</html>
104 Kochan & Partner Brand Design Development
105. Aufbau Cache Manifest (1)
cache.manifest
CACHE MANIFEST Einleitung der zu cachenden Dateien
# Comment your lines with "#" mit CACHE MANIFEST
Auflistung jeder zu cachender Datei
# Cache these
index.html Mehrere unterschiedliche
img/assets/band.jpg Sektionen pro Cache-Datei möglich
img/assets/instruments.jpg
105 Kochan & Partner Brand Design Development
106. Aufbau Cache Manifest (2)
cache.manifest
CACHE MANIFEST
# Comment your lines with "#"
# Cache these
index.html
img/assets/band.jpg
img/assets/instruments.jpg
Festlegung von Inhalten, die nur
NETWORK
über eine Netzwerkverbindung
only-online.html
bezogen werden dürfen (= no cache)
img/really-current-status.gif
106 Kochan & Partner Brand Design Development
107. Aufbau Cache Manifest (3)
cache.manifest
CACHE MANIFEST
# Comment your lines with "#"
# Cache these
index.html
img/assets/band.jpg
img/assets/instruments.jpg
NETWORK
only-online.html
img/really-current-status.gif
FALLBACK Alternativ-Inhalte zur Ausgabe bei
/ sorry-you-are-offline.html nicht erreichbaren Ressourcen
des NETWORK-Abschnitts
107 Kochan & Partner Brand Design Development
108. Events
checking Manifest wird erstmalig geladen
noupdate Keine Veränderung des Manifests
downloading Manifest und Dateien werden initial heruntergeladen
progress Dateien werden heruntergeladen
cached Alle Dateien befinden sich im Cache
updateready Alle Dateien wurden aktualisiert und befinden
sich nun im Cache
obsolete Cache ist ungültig (z.B. 404) und wird gelöscht
error Fehler oder Änderung während des Downloads
108 Kochan & Partner Brand Design Development
112. Selektoren CSS2.1
Pseudo-Klassen
:first-child Genau das erste Kind
:last-child Genau das letzte Kind
Attribut-spezifische Selektion
element[attribute] element mit Attribut attribute
a[target="_blank"] Anchor mit Attribut target und Attributwert
exakt "_blank"
div[class~="copytext"] Division mit einer mindestens der Klasse
copytext (= div.copytext)
div[lang|="de"] Division mit Attribut lang matcht alle Werte, die
von links mit de beginnen, z.B.
lang="de", lang="de-de, de-at"...
112 Kochan & Partner Brand Design Development
114. Selektoren CSS3 (1)
Pseudo-Klassen
:root Das root-Element des Dokuments, body
:nth-child(n) Das n-te Kind, z.B. nth-child(7),
nth-child(odd)oder nth-child(even)
:nth-last-child(n) dito, umgekehrte Zählung
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child Ein Einzelkind
:empty Ein leeres Element
:enabled, :disabled Ein- oder ausgeschaltetes Element, z.B. Button
:checked Markiertes Element, z.B. Checkbox oder Radiobox
114 Kochan & Partner Brand Design Development
115. Selektoren CSS3 (2)
Pseudo-Elemente
:first-line Die erste Zeile des Textes
:first-letter Der erste Buchstabe des Textes
:before Generierter Inhalt vor dem Element
:after Generierter Inhalt nach dem Element
Attribut-spezifische Selektion
div[lang^="de"] Attributwert beginnt mit "de"
div[lang$="de"] Attributwert endet mit "de"
div[lang*="de"] Attributwert beinhaltet "de"
Negation
:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen
115 Kochan & Partner Brand Design Development
117. Selektoren für WebForms 2.0
Pseudo-Elemente
:default Default-submit Button des Formulars
:indeterminate Unbestimmte Check- und Radioboxen
:valid Gültiger Wert
:invalid Ungültiger Wert
:in-range Innerhalb des Wertebereichs
:out-of-range Außerhalb des Wertebereichs
:required Pflichtfeld
:optional Elemente ohne required und ohne Validierung
:read-only Schreibgeschützte Elemente
:read-write Elemente ohne Schreibschutz
117 Kochan & Partner Brand Design Development